微信 判斷 上滑 下滑 操作
阿新 • • 發佈:2018-08-27
技術 Y軸 頻繁 dto html nbsp log 下滑 event
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(‘沒動‘); } }
希望你能看懂,看懂的點個贊哦!!!看不懂的留言給源碼!!!
微信 判斷 上滑 下滑 操作