最近在做uni-app,要配合插件市场的一款增强版的抽屉做一个在首页向右滑动抽屉打开想左滑动抽屉关闭的效果,上代码
<view class="wrapper" @touchstart="fingerstart" @touchend="fingerend"> //...中间是内容 </view>
export default {
data() {
return {
startData: {
clientX: '',
clientY: ''
},
}
},
methods: {
fingerstart(e) {
this.startData.clientX = e.changedTouches[0].clientX;
this.startData.clientY = e.changedTouches[0].clientY;
},
fingerend(e) {
const subX = e.changedTouches[0].clientX - this.startData.clientX;
const subY = e.changedTouches[0].clientY - this.startData.clientY;
if (subY > 50 || subY < -50) {
if (subY > 50) {
console.log('下滑')
} else if (subY < -50) {
console.log('上滑')
}
} else {
if (subX > 100) {
console.log('右滑')
} else if (subX < -100) {
console.log('左滑')
} else {
console.log('无效')
}
}
}
}
}