美文网首页
uni-app scroll-view+u-loadmore 实

uni-app scroll-view+u-loadmore 实

作者: 逸笛 | 来源:发表于2022-11-16 11:26 被阅读0次

接口返回数据格式:

图片.png
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scrollView" @scrolltolower="ScrollToLower">
        
            <u-loadmore :status="status"  style="padding-bottom: 20px;" />
        </scroll-view>
data(){
    return{
            page: 1,//分页初始化
            allpage:1,//接口返回总分页
            status: 'loadmore',//加载状态
    }
}
//获取数据接口
getList() {
                this.http({
                    url: "/cpgl/sjgdlbjk",
                    data: {
                        pageNo: this.page,
                        pageSize: 10,
                    },
                    method: 'GET',
                    success: data => {
                        if (data.code === 200) {
                            this.allpage = data.data.pages
                            if (data.data.records.length < 10) {
                                this.status = 'nomore'
                            } else {
                                this.status = 'loadmore'
                            }
                            this.list = this.page === 1 ? data.data.records : [...this.list, ...data.data.records];
                        } else {
                            uni.$u.toast(`${data.msg}`);
                        }
                    },
                    fail: err => {
                        
                        console.error("===>>>", err);

                    }
                })
            },
//触底加载更多
            ScrollToLower(e) {
                if (this.page >= this.allpage) {
                    this.status = "noMore"
                    return;
                } else {
                    this.status = "loading"
                }
                this.page = this.page + 1;
                this.getList()
            },

相关文章

网友评论

      本文标题:uni-app scroll-view+u-loadmore 实

      本文链接:https://www.haomeiwen.com/subject/rejyxdtx.html