直接上代码
<template>
<view style="height: 100vh;background-color: #fff;" @touchstart="touchStart" @touchend="touchEnd">
<view class="" style="width: 100rpx;height: 100rpx;background-color: red;" @click="showDrawer">点击</view>
<uni-drawer ref="showRight" mode="left" width="320">
<scroll-view style="height: 100%;" scroll-y="true">
</scroll-view>
</uni-drawer>
</view>
</template>
<script>
export default {
data() {
return {
startX: 0,
endX: 0,
info: {}
}
},
computed: {},
methods: {
touchStart(e) {
this.startX = e.changedTouches[0].clientX;
},
touchEnd(e) {
this.endX = e.changedTouches[0].clientX;
const moveDis = this.startX - this.endX;
console.log(moveDis);
if (moveDis == 0) return;
if(moveDis < -25) {
this.showDrawer();
}
},
showDrawer() {
this.$refs.showRight.open();
},
closeDrawer() {
this.$refs.showRight.close();
},
}
}
</script>
<style scoped lang="scss">
</style>
