uni-app的scroll-view上拉加载数据请求防抖-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 解决scroll-view上拉到底部时触发多次数据请求的问题

问题

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

212a33988b8a46b794db3b9aac08e1fe.png

解决方法

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

code.png


// 滚动到最底部触发事件
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自定义,包括隐藏滚动条。

参考资料

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章