uni-app中分页器的实现

一、template

change函数在每次点击上一页 或者写一页的时候会触发，其传递的参数是当前的current页数

<uni-section class="fixed-bottom" title="默认样式" type="line" padding>
         <uni-pagination @change="handleList" :current="current" 
         :pageSize="8" :total="total" title="标题文字"/>
</uni-section>

二、data

     LicenceNum : undefined,  //查询须要的参数
     checkList: [],
     total: 0,
     current: 1

三、methods函数

      handleList(e) {
           console.log(e, 'eeeeeeeeeeeee')
             this.current = e.current
             let obj = {
                    pageSize: 8,
                    pageNum: e.current,
                }
                checkList(this.LicenceNum ,obj).then(res => {
                    this.checkList = res.rows
                })
            }

四、onLoad函数

        onLoad(e) {
            this.LicenceNum = e.num;
            this.userId = e.userId
            let obj = {
                pageSize: 8,
                pageNum: 1
            }
            checkList(e.num, obj).then(res => {
                console.log(res, 'ddd')
                this.total = res.total
                this.checkList = res.rows
            })
        }

五、总结

刚进页面的时候，接收上一个页面传递过来的查询参数，此时调用后端查询接口，这时候的pageSize和pageNum值是固定的，默认查询第一页，同时将数据总条数设置给total，组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数，传来当前的页数，你再去调用接口查询当前页码的数据即可。