移动端——滑动手势效果

代码

<template>
    <view 
    @touchstart="touchstart" // 触摸开始；
    @touchmove="touchmove"   // 手指滑动过程；
    @touchend="touchend"     // 触摸结束，手指离开屏幕；
    >
    </view>
<template>
<script>
    export default{
        data(){
            return{
                touchData:{} // 手指滑动数据存放
            }
        },
       methods: {
        touchstart(e) {
                    // console.log('开始',e.changedTouches);
                    
                    // 将 触摸开始 数据 X,Y 轴坐标存入 touchData
                    this.touchData.clientX = e.changedTouches[0].clientX;
                    this.touchData.clientY = e.changedTouches[0].clientY;
        },
        touchmove(e){
            // console.log('过程',e.changedTouches);
        },
        touchend(e) {
                    // console.log('结束',e.changedTouches);
            
                    // 利用 触摸完毕的数据 减 触摸开始的数据 得到移动的距离
                    const subX = e.changedTouches[0].clientX - this.touchData.clientX;
                    const subY = e.changedTouches[0].clientY - this.touchData.clientY;
                    console.log('y',subY);
                    console.log('x',subX);
            
                    // 利用移动的距离 进行判断 手势X轴滑了多少，Y轴滑了多少。
                    if(subY > 500 && subX >500){
                        console.log('到位');
     
                  }
             },
         },
    }
</script>

结语:

利用手势 开始坐标 到 结束时 滑了多少距离来实现。