收藏
回答

请教一下大家,如何判断初始左右滑动后不响应上下滑动?

问题模块
API和组件

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

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

bindtouchmove函数中可以做到这样吗?


还望各位高手赐教。


最后一次编辑于  2017-11-23
回答关注问题邀请回答
收藏

6 个回答

  • wfl
    wfl
    2017-11-23

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

    2017-11-23
    赞同
    回复
  • huhu583
    huhu583
    2017-11-23

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

    2017-11-23
    赞同
    回复
  • huhu583
    huhu583
    2017-11-23

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



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

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

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

    2017-11-23
    赞同
    回复
  • wfl
    wfl
    2017-11-23

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

    2017-11-23
    赞同
    回复
  • huhu583
    huhu583
    2017-11-23

    明白了,谢谢大神。

    2017-11-23
    赞同
    回复
  • wfl
    wfl
    2017-11-23
    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);

    },

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

    2017-11-23
    赞同
    回复