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

发布于 7 年前作者 huangwei9250 次浏览最后编辑 7 年前来自 ask

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

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

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


还望各位高手赐教。

6 回复
yuanyong
yuanyong1 楼6 年前

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

mren
mren2 楼6 年前

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

WXOPEN Club 内容图片

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

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

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

tanjuan
tanjuan3 楼6 年前

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

gangxie
gangxie4 楼6 年前

明白了,谢谢大神。

jieliao
jieliao5 楼6 年前

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

cuilei
cuilei6 楼5 年前
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);

},

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