在uniapp中写一个简单的分页功能

环境

使用的是HbuilderX编译器，版本是Vue2的uniapp项目，使用到的插件是uniapp自己的uni-ui插件

uni-ui HbuilderX 安装路径 :
https://ext.dcloud.net.cn/plugin?id=55
如果是使用的Vscode编译器，自己百度搜下咋npm，暂时没用到

原理

分页的原理其实很简单，就是把你需要分页的原数据分隔成多个小数组进行展示，我这里是新建了个空数组，每次把需要展示的条数的数据赋值给这个空数组，遍历的时候也是遍历这个空数组。

代码

Vue页面代码(v-for部分就不展示了,把这坨粘到你需要展示分页的地方就行了)

<uni-pagination
              :total="pages.len"
              :current="pages.current"
              @change="pagesChange"
              :pageSize="pages.pageShow"
            >
</uni-pagination>

几个比较重要的属性：

• total:这个值要和你的原数组的长度相同
• current: 当前页面，默认设置为1就行了，因为一般一开始展示的都是第一页
• pageSize: 要分页的数量
• @change:uni-ui中带的方法，会自动带一个回调函数，回传一个对象。我们可以通过这个对象取到current

Js代码

data(){
	return{
	//* 原始数组数据，太长了 我就不粘贴了 写个名字知道是原数组就行了
		comList:[],
	 //* 分页模块
      pages: {
        len: 0, //* 数据总长度
        pageShow: 3, //* 展示的数据条数
        start: 0,//* 分页开始的位置
        end: 0,//* 分页结束的位置
        current: 1,//* 一开始展示的页面
      },
//* 设置一个展示分页数据的数组
      comPagesList: [],
}
},
mounted(){
	 //*将数组长度赋给len
    this.pages.len = this.comList.length;
    //* 一开始数组结束位置应该为展示的条数
    this.pages.end = this.pages.pageShow;
//* 调用给空数组赋值的方法
  this.assignList();
    
}
methods:{
	 //* 定义一个方法给空数组赋值
    assignList() {
      this.comPagesList = [];
      for (let i = this.pages.start; i < this.pages.end; i++) {
        if (this.comList[i]) {//* 如果comList[i]为空则不进行操作，否则会赋值一堆脏数据
          this.comPagesList.push(this.comList[i]);
        }
      }
    },
    //* 分页的方法
    pagesChange(e) {
      this.pages.end = this.pages.pageShow * e.current;   //* 每次遍历的结尾应该为分页数*当前选取的页数
      this.pages.start = this.pages.end - this.pages.pageShow; //* 每次遍历的开头则应该为结尾减去分页数
      this.assignList();
    },
}

补充

如果想使用原生js来实现分页效果，则需要再定义一个total属性

  this.pages.total =
      this.pages.len % this.pages.pageShow === 0
        ? this.pages.len / this.pages.pageShow
        : this.pages.len / this.pages.pageShow + 1;

计算出分出的页数，再为上一页下一页添加自己的事件

效果图