分页 pagination文件

pagination 文件
组件文件地址
单个页面使用

引入

<link rel="stylesheet" href="/static/admin/pagination/pagination.css">
<script src="/static/admin/pagination/pagination.js"></script>

   <div class="paging"></div>
	
   data: function () {
         return {
              page: 1,
              bannerList: [],
              isPaged: false, //防止页码不动
          }
      },
    
   created: function () {
       // 获取轮播图接口
       this.getBannerList()
   },
   methods: {
            getBannerList() {
                var that = this
                apiRequest(adminApi.Banner.getList, { page: this.page, list_rows: 10 }, function (ret) {
                    // console.log(ret)
                    that.bannerList = ret.page_data
                    if (!that.isPaged) {
                        let paging = new Paging({
                            PageSize: 10,
                            total: ret.total,
                            onPage: function (page) {
                                // console.log(page)
                                that.page = page
                                // 当前页码
                                that.getBannerList()
                            }
                        })
                        that.isPaged = true
                    }
                })
            }
         
        }

在一个页面多次使用该分页功能

       data: function () {
           return {
               page0: 1,
               page1: 1,
               page2: 1,
               page3: 1,
               page4: 1,
               page5: 1,
               page6: 1,
               page7: 1,
               page8: 1,
               page9: 1,
               page10: 1,
               page11: 1,
               page12: 1,
               isPaged1: false,
               isPaged2: false,
               isPaged3: false,
               isPaged4: false,
               isPaged5: false,
               isPaged6: false,
               isPaged7: false,
               isPaged8: false,
               isPaged9: false,
               isPaged10: false,
               isPaged11: false,
               isPaged12: false,
           }
       },
     methods: {
            // 获取用户接口
            getUserList() {
                var that = this
                apiRequest(adminApi.User.getList, { page: this.page0, list_rows: 10 }, function (ret) {
                    that.UserList = ret.page_data
                    if (!that.isPaged0) {
                        let paging0 = new Paging({
                            PageSize: 10,
                            container: document.getElementById('paging0'),
                            total: ret.total,
                            onPage: function (page) {
                                that.page0 = page
                                // 当前页码
                                that.getUserList()
                            }
                        })
                        that.isPaged0 = true
                    }
                })
            },
             // 获取家庭接口
             getFamilyList() {
                var that = this
                apiRequest(adminApi.Family.getList, { page: this.page1, list_rows: 10 }, function (ret) {
                    that.FamilyList = ret.page_data
                    if (!that.isPaged1) {
                        let paging1 = new Paging({
                            PageSize: 10,
                            container: document.getElementById('paging1'),
                            total: ret.total,
                            onPage: function (page) {
                                that.page1 = page
                                // 当前页码
                                that.getFamilyList()
                            }
                        })
                        that.isPaged1 = true
                    }
                })
            },
            // 获取资讯接口
            getArticleList() {
                var that = this
                apiRequest(adminApi.Article.getList, { page: this.page2, list_rows: 10 }, function (ret) {
                    that.FamilyList = []
                    that.ArticleList = ret.page_data
                    if (!that.isPaged2) {
                        let paging2 = new Paging({
                            PageSize: 10,
                            total: ret.total,
                            container: document.getElementById('paging2'),
                            onPage: function (page) {
                                that.page2 = page
                                // 当前页码
                                that.getArticleList()
                            }
                        })
                        that.isPaged2 = true
                    }
                })
            },
         }