移动端列表分页，删除交互优化

在小程序、H5等移动端中，列表的加载不同于PC端的表格，数据是分页显示的。

在移动端中，一般都是上滑加载新数据，但是不会切换显示已加载的上一页数据，而是拼接到底部。

该篇博客使用 Vue + elementUI 技术栈实现。

模拟数据库数据列表及分页查询 api

假设初始化有100条数据，存储的值为 1~100，在 vue 中用 dbList 变量表示。

那么分页读取的函数方法如下（模拟查询接口数据）

getData(currPage = 1, pageSize = 10) {
   
      let totalPage = Math.ceil(this.dbList.length / pageSize); // 最大分页
      let maxNum = pageSize + (currPage - 1) * pageSize;
      if (totalPage == currPage) {
   
        //
        maxNum = this.dbList.length;
      }

      let rows = [];
      for (let i = 0 + (currPage - 1) * pageSize; i < maxNum; i++) {
   
        rows.push(this.dbList[i]);
      }
      return {
   
        total: this.dbList.length,
        rows
      };
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上滑加载，初始化数据为

list: {
   rows: [], total: 0}
1
2

加载函数

getList(currPage = 1) {
   
      let data = this.getData(currPage
1
2