请教一下大家，如何判断初始左右滑动后不响应上下滑动？
发布于 6 年前 作者 huangwei 9111 次浏览 来自 问答

是这样的，我现在做好了一个列表左滑出删除按钮的效果，我想做成像手机qq或微信那样。

初始左右滑，就不会再上下滑了。初始上下滑就不会再左右滑了。

在bindtouchmove函数中可以做到这样吗？


还望各位高手赐教。

6 回复

小程序没有阻止默认事件，不能实现。推荐一篇文章你看一下http://www.jianshu.com/p/4af2d8fa66a9

是这样的，我有一个公告列表。

可以看到。一个屏幕是显示不全的。所以这个列表可以上下滚动嘛。

然后，第一项都可以左滑出删除按钮。

我想参考微信和qq的列表页面。在初始已经判断为左滑的情况下，竖直方向上不能移动。只能左右滑动。

不是第一项，是每一项。说错了。

明白了，谢谢大神。

为什么要阻止？场景可以说一下吗？

touchS: function (e) {
  var that = this;
  //console.log("touchS" + e);
  if (e.touches.length == 1) {
    var list = that.data.addressList;
    for (var i = 0; i < list.length; i++) {
      list[i].left = 0;
    }
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  }
},
touchM: function (e) {
  var that = this
  if (e.touches.length == 1) {
    var moveX = e.touches[0].clientX;
    var moveY = e.touches[0].clientY;
    var disX = that.data.startX - moveX;
    //获取滑动角度
    var angle = that.angle({
      X: that.data.startX,
      Y: that.data.startY,
    }, {
      X: moveX,
      Y: moveY
    });
    if (Math.abs(angle) > 20) {
      this.setData({isScroll: false});
      return;
    }
    var btnWidth = that.data.btnWidth;
    var left = "";
    if (disX == 0 || disX < 0) {
      left = "left:0px";
    } else if (disX > 0) {
      left = "left:-" + disX + "px";
      if (disX >= btnWidth * 2) {
        left = "left:-" + btnWidth * 2 + "px";
      }
    }
    var index = e.currentTarget.dataset.index;
    var list = that.data.addressList;
    list[index].left = left;
    this.setData({
      addressList: list
    });
  }
},
touchE: function (e) {
  //console.log("touchE" + e);
  var that = this
  if (!that.data.isScroll)return
  if (e.changedTouches.length == 1) {
    var endX = e.changedTouches[0].clientX;
    var disX = that.data.startX - endX;
    var btnWidth = that.data.btnWidth;
    var left = disX > btnWidth ? "left:-" + btnWidth * 2 + "px" : "left:0px";
    var index = e.currentTarget.dataset.index;
    var list = that.data.addressList;
    list[index].left = left;
    that.setData({
      addressList: list
    });
  }
},
angle: function (start, end) {
  var _X = end.X - start.X, _Y = end.Y - start.Y
  //返回角度
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);

},

通过起始位置和结束位置求角度判断该不该上下滑动

回到顶部