uniapp后台分页下拉加载新分页数据

我这里是写了两种,第一种是后台返回一页数据加总数据,如1页8条,共32条

进入页面请求数据,然后定义好数据

async getData() {
		const res = await this.$api.getSquareList({  //我的接口数据
		page: this.page,
		pindustry_id: this.pindustry_id,
		user_id: this.vuex_user_id,
		address: this.vuex_address
	})
		this.tabData = this.tabData.concat(res.data.data)   //在data里定义的数据接收
		this.pageTotal = res.data.count           //然后把总条数接收一下
	},

然后在触底的时候操作

onReachBottom(){
         
         if (this.pageTotal === this.tabData.length) {   //总条数等于当前返回条数
					this.$u.toast('没有更多内容了~')
				} else {
					this.$u.toast('加载中...')
					this.page = this.page + 1
					this.getData()
	}
}

第二种就是当你进入页面的时候调接口,给一个参数为1,在这个方法里面判断是这个参数,如果是1,就让他正常请求,如果是2,就让数据合并

onLoad(options) {
    if (!this.vuex_user_id) return;
    this.getOkamiDetail(1); //参数为1
  },

调用接口方法

getOkamiDetail(type) {  //type为传参参数
      let data = {
        user_id: this.vuex_user_id,
        member_id: this.id,
        page: this.page,
      };
      this.$api.getOkamiDetail(data).then((res) => {
        console.log(res);
        if (type == 1){   //为1的时候接收
           this.okamiDetail = res.member; 
         }else{
        this.releaseList = [...this.okamiDetail, ...res.member];  //为2的时候让数据合并
        }
      });
    },

猜你喜欢

转载自blog.csdn.net/weixin_67434908/article/details/130292144