博客

滑动操作

简答的html代码，没有样式 和 效果

利用了 touchstart点击到 touchend点击结束

// html
<view class="container" @touchstart="start" @touchend="end">
<view>

我们有 uniapp 的自带事件，理一下思路，我们点击到盒子后，记录开始的 x y轴位置，当拖动结束后，也就是抬起手指，去比较我们现在的位置和初始的位置，去判断我们是什么操作，做什么反馈处理

// js
data(){
   return{
      startData:{
            clientX:'',
            clientY:''
       }
    }
}
添加方法：

start(e){               
    this.startData.clientX=e.changedTouches[0].clientX;             
    this.startData.clientY=e.changedTouches[0].clientY;
},

end(e){
    const subX=e.changedTouches[0].clientX-this.startData.clientX;
    const subY=e.changedTouches[0].clientY - this.startData.clientY;
    if(subY>50 || subY<-50){
        console.log('上下')
    }else{
        if(subX>50){
            console.log('右')
        }else if(subX<-50){
            console.log('左')
        }else{
            console.log('无效')
        }
    }
}

上面代码是 我们手指离开后才会有效果，我们想做跟随的也可以，uniapp提供我们移动时的事件

@touchmove="move"

参数和上面开始，结束一样，方法是我们按下手指后每一次移动都会触发

这时我们需要第二个变量，例：当我们向左滑动，和初始值比较肯定是小了，每次滑动记录这个值，并通过 style 样式赋值给需要滑动的盒子，当这个值到了临界值，比如50，我们就移动盒子并固定好。

注：当向右滑动时，

先减去我们记录好的值，这个值为0，既已经回到原位。