1. 程式人生 > >小程式滾動事件相關總結

小程式滾動事件相關總結

1.有時候我們需要每次進入頁面都是回到頁面的頂部的這時候可以用 :

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})
這其實跟其他技術路由跳轉設定每次都從頂部開始是一個道理。這個方法目前與<scroll-view>元件在同個頁面中使用時會有衝突不起作用。

2.上拉載入更多資料。

小程式中資料分頁請求的情況也是比較多的,這個時候我可能需要進行上拉載入更多操作。我目前知道兩種方法:

  1).運用<scroll-view>元件 監聽其bindscrolltolower事件,注意點:scroll-y要設為true, 給需要滾動的區域設定height

  2).小程式頁面都能使用 onReachBottom() 事件處理函式

 這兩種方法都可以實現,看自己需求了。

3. 到頁面最後最底部 想觸發bindscrolltolower事件 或onReachBottom() 必須要先往下滑再往上拉才能觸發問題

  被這個問題搞了有一段時間,網上,社群提問,問公司的大佬都沒能解決, PM一致糾結這個,想打人的心情都有了。。。 今天下午靈光一現,想到一個方法可以解決:就是當頁面滾動到底部的時候,往上回滾一些距離。

程式碼如下:

1)通過使用頁面自帶的onPageScroll事件處理函式獲取距離頂部的距離 

onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  }

2)當頁面滾動到底部時網上回滾一些距離

onReachBottom() {
  wx.pageScrollTo({
    scrollTop: this.scrollTop-2,
    duration: 0
  })
  //其他操作
}

想往上回滾多少距離就減多少,單位是px, duration需要設為0 , 要不然會有預設的300ms過度時間。