微信小程序上下左右滑动

最新推荐文章于 2024-07-23 14:17:22 发布

lx_1024

最新推荐文章于 2024-07-23 14:17:22 发布

阅读量1.2w

点赞数 4

分类专栏：微信小程序文章标签：微信小程序划动方向

本文链接：https://blog.csdn.net/lx_1024/article/details/79700716

版权

本文介绍了微信小程序中利用taughtstart、taughtmove、taughtend事件来判断用户滑动方向的方法。通过监听手指位置变化，确定滑动路径，并在特定容器内实现滑动操作。在taughtend事件中，可以添加动画效果并切换轮播图到下一张。

摘要由CSDN通过智能技术生成

微信小程序支持taughtstart，taughtmove，taughtend事件，通过调用这几个事件，判断手指的位置，通过位置的差值来判断手指是怎么滑动的,把事件绑定在一个容器上，设定这个容器的大小，就可以在容器内划动，然后判断其划动方向。

<view class="contentContainer" bindtouchmove="handletouchmove" bindtouchstart="handletouchstart" bindtouchend="handletouchend">
  <text>{
  {text}}</text>
</view>

data:{
   flag:0,
   text:''
},
handletouchmove: function(event) {
    // console.log(event)
    if (this.data.flag!== 0){
      return
    }
    let currentX = event.touches[0].pageX;
    let currentY = event.touches[0].pageY;
    let tx = currentX - this.data.lastX;
    let ty = currentY - this.data.lastY;
    let text = "";
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text