最近在做uni-app,要配合插件市场的一款增强版的抽屉做一个在首页向右滑动抽屉打开想左滑动抽屉关闭的效果,上代码

<view class="wrapper" @touchstart="fingerstart" @touchend="fingerend">
//...中间是内容
</view>
template区域
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('无效')
                    }
                }
            }
        }
    }

 

posted on 2021-03-11 09:45  小菟同学  阅读(1227)  评论(0编辑  收藏  举报

……