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('没动');
		}
	}    

  希望你能看懂,看懂的点个赞哦!!!看不懂的留言给源码!!!

posted @ 2018-08-27 16:07  何少旭  阅读(3191)  评论(0编辑  收藏  举报