小程式滾動事件相關總結
阿新 • • 發佈:2018-12-19
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過度時間。