小程序 scroll-view 下拉到底部 onScrollTo

滑动过快，或页面列表元素高度还没渲染出来，可能导致 scroll-view 的 scrollToLower 不触发

特别是在部分安卓手机上，scroll-view 滚动速度可以滑很快，快速滑动 几乎是必现bug;

我们首先尝试监听 onScroll 事件，手动判断是否滚动到底部

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

发现这个条件判断跟 onScrollToLower 一样，scrollToLower 不触发时 下面条件也不成立（scrollTop 比当前实时的值小了）

scrollTop + viewHeight + props.threshold >= scrollHeight

有不少网友说

可以把 lower-threshold 的距离调大一些，比如200px

尝试了下，确实可以一定程度解决，但是还是有可能出现此问题，这个值还不是确定的，而且页面距底部过高就去触发 scrollToLower 体验不是很好。

最终解决方案：

我们增加一个 larger-threshold，当 scrollToLower 不触发的时候，用 larger-threshold 去比较。

const onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
    const largerThreshold = viewHeight * 3 / 4; // 距离底部距离 视图高度的 3/4
    if (
        scrollTop + viewHeight + props.threshold < scrollHeight // onScrollToLower 不触发
        && scrollTop + viewHeight + props.threshold >= scrollHeight 
     ) {
        onScrollToLower(); // 手动触发 onScrollToLower
    }
};

onScroll 可以加个 debounce，它的执行频率往往不需要很高的

这里再给出其他2种方案的思路

• 降低滚动速度，慢速滑动就不会出现以上问题了。
• 等待scroll-view 渲染完成，延迟去 querySelect 元素的位置/尺寸，再去判断是否抵达底部

相关问题

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