时间:2019-05-03 来源:小程序工厂
…***:
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);},通过起始位置和结束位置求角度判断该不该上下滑动
h***:
您好,我也是这个思路,可是我要实现左划删除的效果是一个列表, 我想知道,如果列表长了,是可以上下滚动的,我想知道的是,假设已经判断为左右滑动了,如何不响应上下滑动。
地图问题。
h***:
明白了,谢谢大神。
h***:系统记录
h***:
如果不该上下滑动,那么怎么阻止?现在上下滑动是列表超出屏幕自带的。我怎么阻止列表的滚动?
live-player在自定义组件内部使用的bug
…***:
为什么要阻止?场景可以说一下吗?
h***:
是这样的,我有一个公告列表。
可以看到。一个屏幕是显示不全的。所以这个列表可以上下滚动嘛。
然后,第一项都可以左滑出删除按钮。
我想参考微信和qq的列表页面。在初始已经判断为左滑的情况下,竖直方向上不能移动。只能左右滑动。
h***:
不是第一项,是每一项。说错了。
scroll-view 中有canvas,在scroll-view 滑动时bug+微信小程序开发教程 ...
…***:
微信小程序没有阻止默认事件,不能实现。推荐一篇文章你看一下http://www.jianshu.com/p/4af2d8fa66a9
h***:
好的。谢谢你。