【小程序】分页组件封装

参考elementui中分页组件

README.md

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

代码

1. pagination.ttml

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

2. pagination.json

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

3. pagination.js

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);}},}
})

4. pagination.ttss

.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改变的时候赋值给这个值