微信小程序上下左右滑动

最新推荐文章于 2024-07-22 01:47:16 发布

原创

最新推荐文章于 2024-07-22 01:47:16 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #划动方向

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

微信小程序支持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 = "向左滑动";
        this.data.flag= 1
      }
      else if (tx > 0) {
        text = "向右滑动";
        this.data.flag= 2
      }

    }
    //上下方