1:判断用户动作,“向上滑动” 或者 “向下滑动”,闲话不多说,直接上代码:
方法1 ( 利用 bindtouchmove,缺点:可能会频繁操作 setData 方法 ) :
<view
wx:for="{{list}}"
id="{{item}}"
wx:key="{{index}}"
bindtouchmove="checktouchmove"
class="knowledgeNodes">
{{item}}
</view>
// 知识点 : bindtouchmove , 弊端 特别频繁的操作 setData 方法
Page({
data: {
lastX: 0, // 滑动开始x轴位置
lastY: 0, // 滑动开始y轴位置
},
// 判断用户动作,上滑或者下滑
checktouchmove: function(event){
var currentX = event.touches[0].pageX
var currentY = event.touches[0].pageY
var tx = currentX - this.data.lastX
var ty = currentY - this.data.lastY
var text = ""
if (Math.abs(tx) <= Math.abs(ty)) {
// 上下方向滑动
if (ty < 0){
text = "向上滑动"
// 操作 setData 方法改变 data 值
}else if (ty > 0){
text = "向下滑动"
// 操作 setData 方法改变 data 值
}
}
console.log(text);
//将当前坐标进行保存以进行下一次计算
this.data.lastX = currentX
this.data.lastY = currentY
}
})
方法2 ( 利用 bindtouchstart,bindtouchend,推荐用法,原因:用户开始滑动和结束滑动都是分别只有一个事件,消除了频繁操作setData的可能性 ) :
// 判断用户动作,上滑或者下滑, data 中添加 firstTopY, lastTopY 两个参数
// wxml中绑定事件 bindtouchstart = "moveStart" bindtouchend = "moveEnd"
moveStart: function(ent){
console.log(ent)
this.setData({
firstTopY: ent.changedTouches[0].pageY
})
},
moveEnd: function(ent){
console.log(ent)
this.setData({
lastTopY: ent.changedTouches[0].pageY
})
if(this.data.lastTopY > this.data.firstTopY){
console.log('下滑');
}else if(this.data.lastTopY < this.data.firstTopY){
console.log('上滑');
}else{
console.log('没动');
}
}
希望你能看懂,看懂的点个赞哦!!!看不懂的留言给源码!!!