uni-app onReachBottom鈎子觸發問題

前情

uni-app是我很喜歡的跨平台框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app。

最近有多個需求，頁面滾動到底的時候應該加載下一頁數據，於是通過頁面生命周期鈎子onReachBottom來實現。

坑位

onReachBottom是當頁面滾動底一定距離的時候觸發，但是滾動到底后，如果沒有數據加載出來，想再一次觸發那就得手動回滾一點再往上滾才會觸發。

Why?

因為onReachBottom的觸發機制就是頁面滾動到底一定距離的時候觸發，具體多少見pages.json里設置的onReachBottomDistance。

解決方案

即然滾動到一定距離才觸發，那當我們知道已經滾動到底了的時候，且沒有下一頁數據的時候，我們代碼手動往回滾比onReachBottomDistance設置的多一點點距離就好了。

• 在頁面生命周期onPageScroll鈎子里做回滾操作

...
/**
 * 監聽頁面滾動
 * @param {Object} detail
 */
onPageScroll(detail) {
	clearTimeout(this.scrollTimer);
	this.scrollTimer = setTimeout(() => {
		if (this.noDateStatus) {
			this.noDateStatus = false;
			uni.pageScrollTo({
				scrollTop: detail.scrollTop - 25,
				duration: 100
			});
		}
	}, 300);
},
...

• 在pages.json配置臨界距離，此處為滾動到距底部20px的時候觸發onReachBottom

{
      "path": "頁面路徑",
      "style": {
        "navigationBarTitleText": "我是頁面",
				"onReachBottomDistance": 20
      }
    }

至此，已完成了每次滾動到最底的時候都能自動回滾等待下一次的滾動操作，如果你有更好的方式，期待你的分享。