【小程序】分页组件封装

参考elementui中分页组件

README.md

参数	说明
total	总条目数
currentPage	当前页数
pageSize	每页显示个数
pagerCount	页码按钮的数量，当总页数超过该值时会折叠
hideOnSinglePage	只有一页时是否隐藏

代码

pagination.ttml

html 复制代码

<view class="pagination">
  <dg-button
    icon="fanyezuo"
    type="text"
    bind:handleClick="handlePrevClick"
    disabled="{{currentPage === 1}}"
    tt-if="{{ pageCount > 0 && !(hideOnSinglePage && pageCount === 1) }}"
  />
  <view
    class="pager"
    bindtap="onPagerClick"
  >
    <view
      tt-if="{{ pageCount > 0 && !(hideOnSinglePage && pageCount === 1) }}"
      class="number {{currentPage === 1 ? 'active' : ''}}"
      data-pager="{{1}}"
    >
      1
    </view>
    <view
      class="number pager-more"
      tt-if="{{showPrevMore}}"
    >
      ...
    </view>
    <view
      tt:for="{{pagers}}"
      tt:for-item="pager"
      class="number {{currentPage === pager ? 'active' : ''}}"
      data-pager="{{pager}}"
    >
      {{ pager }}
    </view>
    <view
      class="number pager-more"
      tt-if="{{showNextMore}}"
    >
      ...
    </view>
    <view
      tt-if="{{ pageCount > 1 }}"
      class="number {{currentPage === pageCount ? 'active' : ''}}"
      data-pager="{{pageCount}}"
    >
      {{ pageCount }}
    </view>
  </view>
  <dg-button
    icon="fanyeyou"
    type="text"
    bind:handleClick="handleNextClick"
    disabled="{{currentPage === pageCount}}"
    tt-if="{{ pageCount > 0 && !(hideOnSinglePage && pageCount === 1) }}"
  />
</view>

pagination.json

javascript 复制代码

{
  "component": true,
  "usingComponents": {
    "dg-button": "/components/button/button"
  }
}

pagination.js

javascript 复制代码

Component({
  options: {
    addGlobalClass: true
  },
  properties: {
    total: {
      type: Number,
      value: 0,
      observer: 'handlePagers'
    },
    currentPage: {
      type: Number,
      value: 1,
      observer: 'handlePagers'
    },
    pageSize: {
      type: Number,
      value: 10
    },
    // 页码按钮的数量，当总页数超过该值时会折叠【大于等于 5 且小于等于 21 的奇数】
    pagerCount: {
      type: Number,
      value: 5
    },
    // 只有一页时是否隐藏
    hideOnSinglePage: {
      type: Boolean,
      value: true
    }
  },
  data: {
    showPrevMore: false,
    pagers: [], // 中间的数字列表
    showNextMore: false,
    pageCount: 0, // 总页数
  },
  methods: {
    handlePagers: function () {
      this.setData({
        pageCount: Math.max(1, Math.ceil(this.properties.total / this.properties.pageSize))
      })

      const pagerCount = this.properties.pagerCount;
      const halfPagerCount = (pagerCount - 1) / 2;

      const currentPage = Number(this.properties.currentPage);
      const pageCount = Number(this.data.pageCount);

      let showPrevMore = false;
      let showNextMore = false;

      if (pageCount > pagerCount) {
        if (currentPage > pagerCount - halfPagerCount) {
          showPrevMore = true;
        }

        if (currentPage < pageCount - halfPagerCount) {
          showNextMore = true;
        }
      }

      const array = [];

      if (showPrevMore && !showNextMore) {
        const startPage = pageCount - (pagerCount - 2);
        for (let i = startPage; i < pageCount; i++) {
          array.push(i);
        }
      } else if (!showPrevMore && showNextMore) {
        for (let i = 2; i < pagerCount; i++) {
          array.push(i);
        }
      } else if (showPrevMore && showNextMore) {
        const offset = Math.floor(pagerCount / 2) - 1;
        for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
          array.push(i);
        }
      } else {
        for (let i = 2; i < pageCount; i++) {
          array.push(i);
        }
      }

      this.setData({
        showPrevMore,
        showNextMore,
        pagers: array
      })

    },
    onPagerClick: function (e) {
      const pager = e.target.dataset.pager;
      // 防止用户点击的是...
      if(!pager) {
        return
      }
      this.triggerEvent('currentChange', pager);
    },
    handlePrevClick: function(){
      if(this.properties.currentPage > 1){
        const newVal = this.properties.currentPage - 1;
        this.triggerEvent('currentChange', newVal);
      }
    },
    handleNextClick: function(){
      if(this.properties.currentPage < this.data.pageCount){
        const newVal = this.properties.currentPage + 1;
        this.triggerEvent('currentChange', newVal);
      }
    },
  }
})

pagination.ttss

css 复制代码

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pager {
  display: flex;  
  align-items: center;
  justify-content: center;
}
.number {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  border: 1px solid transparent;
  border-radius: 2px;
}
.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.pager-more {
  color: #CCCCCC;
}

我组件中没有改变currentPage 是通过emit 然后在外层改变的如果大家想要在组件中改变的话

那就在那几个函数中新增一个字段 curPage 代表页码。然后currentPage改变的时候赋值给这个值