Vue 分页功能伪代码实现

Vue分页功能的实现

其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了

// 这里我们假设后端已经写好了 pageNum和pagesize

  <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
	  <!-- 此处的内容为后台的列表数据-->
	  <van-list>
	  //
getList(){
	axios.get('https://www.daxunxun.banner'+ pageNum).thent(res=>{
				//这里大致上来只是一个形式
				this.data = this.data.concat(res.data||[])
				// 但传入的pagenum和pageszie如果过大的话 后台的数据没有的话 那么后台传来的数据就是为空数组
				// 假设已经设置好了一个data 那么直接对他进行赋值是不可取的。此时需要对他进行整合 concat 合并数组
	})
}

 onLoad() {
          // 更新数据
          //     this.finished = true
          this.loading = true;
          // eslint-disable-next-line no-plusplus
          this.pageNum++;
		  // 每次出发加载函数的收后pagenum都会++ 

          this.getList();
          // 加载状态结束
          setTimeout(() => {
              this.loading = false;
          }, 500);

          // 数据全部加载完成
          // }, 500);
      },

虽然翻页功能实现起来相当简单 但是有些公司的ajax是封装过的 所以我把大致的一个实现思路分享了一下