记录下如何解决scroll-view上拉到底部时触发多次数据请求的问题

问题

用 uni-app 开发h5时有页面需要上拉加载下一页数据，使用scroll-view导致页面级没有滚动，onReachBottom触底事件不触发，所以使用scrolltolower触发滚动条滚动到底部时的数据加载事件，但是产生了多次触发问题。

解决方法

防抖：scrolltolower触发事件中设定一个定时器，在指定时间之后发出请求

<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="reachBottom">
    ...
</scroll-view>

// 滚动到最底部触发事件
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组件 (opens new window)