01_微信監聽頁面滾動事件,兩種方法哦!

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('沒動');
		}
	}    

　　希望你能看懂，看懂的點個贊哦！！！看不懂的留言給源碼！！！