美文网首页
uniapp 前端分页操作

uniapp 前端分页操作

作者: 追逐繁星的阿忠 | 来源:发表于2020-12-07 16:33 被阅读0次
    data() {
                return {
                    Inv:0,
                    items: ['商家邀请码', '商家申请列表'],
                    img3: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/share_money.png',
                    shopImg: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/train_banner.png',
                    storeList: [],
                    page: 1,
                    pageSize: 10,
                    pageTotal: 0,
                    loadingText: '',
                    isNoMoreData: false
                }
            },
    
    1. 核心列表函数
    async getAuditStoreLists(){
                    if(this.isNoMoreData) return false; //如果没得下一页了,则不再执行代码
                    let page = this.page;
    
                    this.$http.post('getAuditStoreLists', {page}, {token: 'token'}).then(([error, res]) => {
                        let data = res.data.data.data
    
                        this.isNoMoreData = data.length == this.pageSize ? false : true; //如果当前的数组10条和分页的10相等,表示有下一页
                        this.page = data.length == this.pageSize ? ++page : page; //如果有下一页,page+1,否则就是当前页
                        this.storeList = this.storeList.concat(data);
    
                        //console.log('数据源',  this.storeList)
                    })
                },
    
    

    2.上拉加载更多:

    
            //上拉加载更多
            onReachBottom() {
                this.getAuditStoreLists();
            },
    
    

    3.下拉刷新

    onPullDownRefresh() {
                console.log('refresh');
                this.page = 1;
                this.storeList = [];
                this.getAuditStoreLists();
                setTimeout(function () {
                    uni.stopPullDownRefresh();
                }, 1000);
            },
    

    相关文章

      网友评论

          本文标题:uniapp 前端分页操作

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