uni-app 无限滚动（下拉获取下一页的数据）

最新推荐文章于 2024-06-18 17:00:01 发布

catino

最新推荐文章于 2024-06-18 17:00:01 发布

阅读量631

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_50953782/article/details/134631884

版权

本文详细介绍了无限滚动的工作原理，提供了一个Vue组件的代码示例，包括监听滚动事件、判断底部加载、调用API加载新数据及处理加载状态的逻辑。

摘要由CSDN通过智能技术生成

什么是无限滚动

无限滚动允许用户在滚到到页面底部时，自动获取下一页内容，无需用户手动点击下一页按钮

无限滚动的代码实现示例

data() {
            return {
                infoList:[],//用于接收数据信息
                pageNum:1,//第几页的数据
                pageSize:15,//一次获取几条数据
                loadStatus:'loading',//加载状态
                isLoadMore:false,  //是否加载中
                contentText: {
                                contentdown: '更多',
                                contentrefresh: '加载中',
                                contentnomore: '无更多信息'
                            }
            }，
mounted() {
            this.infoList=[];
            this.pageNum=1;
            this.getInfo();
        }，
onReachBottom(){  //上拉触底函数
            if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
                this.isLoadMore=true;//开启加载状态，让用户知道正在查询
                this.pageNum+=1;//每次上拉请求新的一页
                this.getInfo();//触发加载数据函数
            }
        },
getInfo(){
                this.$common.getApi('xxx/xxxx/page',{
                    "pageNum":this.pageNum,
                    "pageSize":this.pageSize
                },'POST').then(res=>{
                    if(res.success){
                        if(res.page.list){
                            this.infoList=this.infoList.concat(res.page.list)//返回的数据列表累加到原有的展示数组里
                            if(res.page.list.length<this.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
                                this.isLoadMore=true                                             
                                this.loadStatus='nomore'
                            }else{
                                this.isLoadMore=false
                            }
                        }else{
                            this.isLoadMore=true
                            this.loadStatus='nomore'
                        }
                    }else{
                            this.isLoadMore=false
                            if(this.pageNum>1){
                                this.pageNum-=1//触发此函数前pageNum值已加一，请求数据失败，则应进行减一
                            }
                                        
                        }
                }).catch(res=>{
                    
                });
            }