小程序中判断左右滑动操作

小程序中判断左右滑动操作

test.wxml

<view class='body' style='{{moveLeft}}' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</view>

test.wxss
.body{ width: 100%; min-height: 100vh; position: relative;}

test.js

  ,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 diffX = this.data.startX - moveX;
      var moveLeft = '';
      if (diffX < 0) { //向右
        moveLeft = 'left:' + -(diffX < -90 ? -90 : diffX) + 'px;';
      } else if (diffX > 0) { //向左
        moveLeft = 'left:-' + (diffX > 90 ? 90 : diffX) + 'px;';
      }else{
        moveLeft = 'left:0px;';
      }
      this.setData({
        moveLeft: moveLeft
      });
    }
  },
  touchEnd: function (e) {
    if (e.changedTouches.length == 1) {
      var endX = e.changedTouches[0].clientX;
      var diffX = this.data.startX - endX;
      var moveLeft = 'left:0px;';
      this.setData({
        moveLeft: moveLeft
      });
    }
  },