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、效果