小程序 scroll-view 下拉到底部 onScrollToLower 不觸發(fā)

滑動過快,或頁面列表元素高度還沒渲染出來,可能導(dǎo)致 scroll-view 的 scrollToLower 不觸發(fā)

特別是在部分安卓手機(jī)上,scroll-view 滾動速度可以滑很快,快速滑動 幾乎是必現(xiàn)bug;

我們首先嘗試監(jiān)聽 onScroll 事件,手動判斷是否滾動到底部

const onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
    if (scrollTop + viewHeight + props.threshold >= scrollHeight) {
        // 滑動到底部了
    }
};

發(fā)現(xiàn)這個條件判斷跟 onScrollToLower 一樣,scrollToLower 不觸發(fā)時 下面條件也不成立(scrollTop 比當(dāng)前實時的值小了)

scrollTop + viewHeight + props.threshold >= scrollHeight

有不少網(wǎng)友說

可以把 lower-threshold 的距離調(diào)大一些,比如200px

嘗試了下,確實可以一定程度解決,但是還是有可能出現(xiàn)此問題,這個值還不是確定的,而且頁面距底部過高就去觸發(fā) scrollToLower 體驗不是很好。

最終解決方案:

我們增加一個 larger-threshold,當(dāng) scrollToLower 不觸發(fā)的時候,用 larger-threshold 去比較。

const onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
    const largerThreshold = viewHeight * 3 / 4; // 距離底部距離 視圖高度的 3/4
    if (
        scrollTop + viewHeight + props.threshold < scrollHeight // onScrollToLower 不觸發(fā)
        && scrollTop + viewHeight + props.threshold >= scrollHeight 
     ) {
        onScrollToLower(); // 手動觸發(fā) onScrollToLower
    }
};

onScroll 可以加個 debounce,它的執(zhí)行頻率往往不需要很高的


這里再給出其他2種方案的思路

  • 降低滾動速度,慢速滑動就不會出現(xiàn)以上問題了。
  • 等待scroll-view 渲染完成,延遲去 querySelect 元素的位置/尺寸,再去判斷是否抵達(dá)底部

相關(guān)問題

https://developers.weixin.qq.com/community/develop/doc/000c683a560ae84ffbea0b02951c00
https://developers.weixin.qq.com/community/develop/doc/00086420254c706bb95721b1c56800
http://www.itdecent.cn/p/5314b7c4e324
https://blog.csdn.net/qq_40695895/article/details/82882757

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容