shanjuandong/pages/index/index.vue

<template>
	<view>
		<view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
		 @touchstart="touchStart" @touchend="touchEnd"></view>
		
		<!-- 天生有善 后生友善 按钮 -->
		<view class="btn-box" v-if="number == 3">
			<image src="/static/1/btn1.png" mode="" class="btn1"></image>
			<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
			<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: require('static/1/1.png'),
				number: 0,
				startY: 0
			}
		},
		onLoad() {

		},
		methods: {
			gotoPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			click() {
				this.number += 1
				switch (this.number){
					case 1:
						this.imgSrc = require('static/1/1.png')
						break;
					case 2:
						this.imgSrc = require('static/1/2.png')
						break;
					case 3:
						this.imgSrc = require('static/1/3.png')
						break;
					default:
						break;
				}
			},
			touchStart(e) {
				this.startY = e.changedTouches[0].clientY;
			},
			touchEnd(e) {
				const endY = e.changedTouches[0].clientY;
				const distanceY = this.startY - endY;
				if (distanceY > 50 && this.number == 2) {
					console.log('上滑操作触发');
					this.click()
					// 在此处编写上滑操作执行的逻辑
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
	}
	
	.btn-box {
		width: 100vw;
		height: 830rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		
		image {
			position: absolute;
		}
		
		.btn1 {
			width: 298rpx;
			height: 62rpx;
			top: 0;
			left: 229rpx;
		}
		
		.btn2 {
			width: 243rpx;
			height: 74rpx;
			bottom: 223rpx;
			left: 78rpx;
		}
	}
</style>