uniapp 前端分页操作

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 前端分页操作)