uni-app的scroll-view上拉加载数据请求防抖

2021-05-13 12:16:36

记录下如何解决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自定义,包括隐藏滚动条。

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
微信情报 更多 >
    每天进步一点点~