uni-app的scroll-view上拉加載資料請求防抖

問題

用 uni-app 開發h5時有頁面需要上拉加載下一頁資料，使用scroll-view導緻頁面級沒有滾動，onReachBottom觸底事件不觸發，是以使用scrolltolower觸發滾動條滾動到底部時的資料加載事件，但是産生了多次觸發問題。

解決方法

防抖：scrolltolower觸發事件中設定一個定時器，在指定時間之後送出請求

// 滾動到最底部觸發事件
reachBottom() {
    let _self = this
    if (_self.noClick) {
        _self.noClick = false;
        // 加載資料
        this.initData();
        setTimeout(() => {
            _self.noClick = true;
        }, 1000);
    }
}           

使用建議

• scroll-view 不适合放長清單，有性能問題。長清單滾動和下拉重新整理，應該使用原生導航欄搭配頁面級的滾動和下拉重新整理實作。包括在app-nvue頁面，長清單應該使用list而不是scroll-view。
• scroll-view是區域滾動，不會觸發頁面滾動，無法觸發pages.json配置的下拉重新整理、頁面觸底onReachBottomDistance、titleNView的transparent透明漸變。
• scroll-view的滾動條設定，可通過css的-webkit-scrollbar自定義，包括隐藏滾動條。

參考資料

• scroll-view元件