微信小程序监听左右滑动

效果图如下所示

.wxml

<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd">测试内容</view>

.wxss

view{
  width: 100%;
  float: left;
  overflow: hidden;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background-color: #e54d42;
}

.js

Page({
  data: {
    towards: ''
  },
  touchStart: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        startX: e.touches[0].clientX
      });
    }
  },
  touchMove: function (e) {
    if (e.touches.length == 1) {
      var moveX = e.touches[0].clientX;
      var towards = this.data.startX - moveX;
      this.setData({
        towards: towards
      })
    }
  },
  touchEnd: function (e) {
    let that = this
    if (that.data.towards != '') {
      if (that.data.towards < 0) {//向右
        console.log('向右')
      } else if (that.data.towards > 0) {//向左
        console.log('向左')
      }
    }
    that.setData({
      towards: ''
    })
  },
})

有什么问题欢迎评论留言，我会及时回复你的