uniapp 使用官方 pagination 实现分页效果

1、首先，先下载官方插件

官方插件

注意：当时我项目中不想用安装好的 uni-modules ， 所以直接把 uni-paination 组件导入到 components 中；

2、页面模版

<!-- 分页 -->
<uni-pagination 
   :total="total" 
   :current="current"  
   @change="handlePage"
   class="pagination"
/>

3、JS

import uniPagination from '@/components/uni-pagination/uni-pagination.vue'

export default {
    components: {
        uniPagination
    },
    data() {
        return {
           // 分页参数
           total: '',
           current: 1
        }
    },
　　 getList() {
        uni.request({
           url: '', // 接口
           method: 'GET',
           data: {
              page: this.current,
              page_size: 10,
           },
           dataType: 'json',
           success: res => {
              if (res.statusCode === 200) {
                 this.columnList = res.data.data
                 this.total = res.data.pagination.total
              }
           },
         });
     },
　　　// 分页点击事件
     handlePage(params) {
        this.current = params.current;
        this.getList(params.current) // 点击的时候去请求查询列表
    },
}

4、效果