微信小程序页面左右滑动事件+回到顶部

微信小程序提供了页面的上下滚动的事件,在页面的js文件中,

page({
onPageScroll(e) {
console.log(e.scrollTop)
}
})
但是不是滑动事件,滑动事件需要自己加在view上,

<view bindtouchstart='touchStart' bindtouchend="touchEnd"></view>
如果不让滑动事件冒泡的话.将bind改为catch就好了

<view catchtouchstart='touchStart' catchtouchend="touchEnd"></view>
在js文件中添加绑定的事件处理函数,在touchStart中,将触摸开始获取到的x和y值存储到data里,例如touch.x和touch.y

touchStart(e) {
// console.log(e)
this.setData({
"touch.x": e.changedTouches[0].clientX,
"touch.y": e.changedTouches[0].clientY
});
}
在touchEnd中,也就是手指离开屏幕的事件处理函数中,首先获取到此时的x和y值,

touchEnd(e) {
let x = e.changedTouches[0].clientX;
let y = e.changedTouches[0].clientY;
}
然后再写一个判断方向的简单处理函数,建议将此方法写在utils工具库中,

/***

• 判断用户滑动
• 左滑还是右滑
  */
  const getTouchData = (endX, endY, startX, startY)=> {
  let turn = "";
  if (endX - startX > 50 && Math.abs(endY - startY) < 50) { //右滑
  turn = "right";
  } else if (endX - startX < -50 && Math.abs(endY - startY) < 50) { //左滑
  turn = "left";
  }
  return turn;
  }
  在此方法中,传入四个参数,分别是手指离开的x和y值,分别为endX和endY,手指按下的x和y值,分别为startX和startY,判断离开的x减去开始的x是否大于50px,也就是手指向左滑动超过50px,就是想左滑,如果小于-50则是向右滑,

但是如果此时用户在向下滑或者向上滑的过程中也有向左滑和向右滑的偏移,此时判断用户有向左滑和向右滑就有点不准确了,所以如果满足上述条件并且用户上滑或者下滑的距离不超过50px才判定用户确实是在左右滑动

有些用户使用大拇指滑动的时候喜欢斜着滑,此时上下和左右都有滑动,至于该判断用户是向左右还是向上下,可以用斜率来判断,或者引入touch.js,在这就不写了,这个就作为一种很简单轻量的解决办法.

回到顶部
onPageScroll: function (e) { console.log(e.scrollTop) if (e.scrollTop>300) { this.setData({ showTop: false }) } else { this.setData({ showTop: true }) } }, goTop: function () { wx.pageScrollTo({ scrollTop: 0, duration: 300 }) }