疯狂早茶微信小程序基础篇七滑动操作.pdfVIP

疯狂早茶微信小程序基础篇《七》：滑动操作 在实际的移动应用程序交互方式中，最常见的就是滑动操作。像左右滑动切换页面，手指张开来放大图片等，都是由滑动操作来完成 的。 微信小程序默认提供的相关 如下： tap 对应点击操作，还提供了 longtap 来支持长按操作，这些都比较简单，就不多做讲述。 touchmove 对应滑动操作，通过 bindtouchmove 即可响应滑动操作。 //wxml view id=id bindtouchmove=handletouchmove style = width : 100px; height : 100px; background : #167567; /view //js Page({ handletouchmove: function(event) { console.log(event) }, }) 当按住 view 标签并滑动鼠标时，会不停的触发滑动 ，直到放开鼠标 ，当鼠标移出view 标签区域后依然会触发 。 拖拽操作 通过 滑动 ，可以实现一些实用的功能，比如用过 iphone 的用户都知道 assistivetouch ，一个桌面上的快捷按钮，可以将按钮拖 动到桌面的任意位置。为了方便，这里就用一个圆形来代表该按钮。 //wxml view id=id class = ball bindtouchmove=handletouchmove style = width : 60px; height : 60px; background : #545345; /view //wxss .ball { box-shadow:2px 2px 10px #AAA; border-radius: 20px; position: absolute; } //js Page({ handletouchmove: function(event) { console.log(event) }, }) 好吧，按钮丑了点，这不是重点。拖拽操作的实现思路也很简单，当触发滑动 时，event 对象会包含当前触摸位置的坐标信息，可 以通过 event.touches[0].pageX 和 event.touches[0].pageY 来获取，为什么 touches 是数组呢，答案是为了支持多点触控(在电脑上不 知道如何模拟多点触控)。接下来将按钮的位置设置为触摸位置，应该就能实现 效果了，让我们试试看。 在 Page 中定义按钮的位置数据 ballBottom 和 b ，并绑定到view 的对应属性中。 //wxml view id=id class = ball bindtouchmove=handletouchmove style = width : 60px; height : 60px; background : #545345; top:{{ballTop}}px; left: {{ballLeft}}px /view //js Page({ data: { ballTop: 0, ballLeft: 0, }, handletouchmove: function(event) { console.log(event) }, }) 接下来在 handletouchmove 方法中更新按钮的位置数据 handletouchmove: function(event) { console.log(event) this.setData ({ ballTop: event.touches[0].pageY, ballLeft: event.touches[0].pageX, }); }, 运行发现基本可以实现效果，不过有两个问题，一是会将按钮拖出屏幕边缘，二是按钮始终在鼠标右下方。 接下来加入对屏幕边界的判断并对按钮位置进行修正。其中屏幕大小可以通过 wx.getSystemInfo 来获取。 完整代码如下： Page({ d