滑動(dòng)過(guò)快解虱，或頁(yè)面列表元素高度還沒(méi)渲染出來(lái)，可能導(dǎo)致 scroll-view 的 scrollToLower 不觸發(fā)
特別是在部分安卓手機(jī)上养渴，scroll-view 滾動(dòng)速度可以滑很快介劫，快速滑動(dòng) 幾乎是必現(xiàn)bug;
我們首先嘗試監(jiān)聽(tīng) onScroll 事件包归，手動(dòng)判斷是否滾動(dòng)到底部
const onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
if (scrollTop + viewHeight + props.threshold >= scrollHeight) {
// 滑動(dòng)到底部了
}
};
發(fā)現(xiàn)這個(gè)條件判斷跟 onScrollToLower 一樣，scrollToLower 不觸發(fā)時(shí) 下面條件也不成立（scrollTop 比當(dāng)前實(shí)時(shí)的值小了）
scrollTop + viewHeight + props.threshold >= scrollHeight
有不少網(wǎng)友說(shuō)
可以把 lower-threshold 的距離調(diào)大一些赘理，比如200px
嘗試了下宦言，確實(shí)可以一定程度解決，但是還是有可能出現(xiàn)此問(wèn)題商模，這個(gè)值還不是確定的奠旺，而且頁(yè)面距底部過(guò)高就去觸發(fā) scrollToLower 體驗(yàn)不是很好。
最終解決方案：
我們?cè)黾右粋€(gè) larger-threshold施流，當(dāng) scrollToLower 不觸發(fā)的時(shí)候响疚，用 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(); // 手動(dòng)觸發(fā) onScrollToLower
}
};
onScroll 可以加個(gè) debounce嫂沉，它的執(zhí)行頻率往往不需要很高的
這里再給出其他2種方案的思路
- 降低滾動(dòng)速度，慢速滑動(dòng)就不會(huì)出現(xiàn)以上問(wèn)題了扮碧。
- 等待scroll-view 渲染完成趟章，延遲去 querySelect 元素的位置/尺寸，再去判斷是否抵達(dá)底部
相關(guān)問(wèn)題
https://developers.weixin.qq.com/community/develop/doc/000c683a560ae84ffbea0b02951c00
https://developers.weixin.qq.com/community/develop/doc/00086420254c706bb95721b1c56800
http://www.reibang.com/p/5314b7c4e324
https://blog.csdn.net/qq_40695895/article/details/82882757
