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是封装过的 所以我把大致的一个实现思路分享了一下