微信小程序頁面左右滑動事件+回到頂部

微信小程序提供了頁面的上下滾動的事件,在頁面的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 }) }