You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
1.9 KiB
97 lines
1.9 KiB
<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>
|
|
|