uni-app中分页器的实现

本文主要是介绍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.currentlet 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.userIdlet obj = {pageSize: 8,pageNum: 1}checkList(e.num, obj).then(res => {console.log(res, 'ddd')this.total = res.totalthis.checkList = res.rows})}

五、总结

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

这篇关于uni-app中分页器的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---