website·Indexed 32 days ago
https://z-paging.zxlee.cnA comprehensive pagination component for uni-app that supports custom pull-to-refresh, load-more, virtual lists, and chat-record mode. It provides full-platform compatibility, including nvue and uniapp-x support, with built-in management for empty data states, loading indicators, and back-to-top functionality.
The Chat Record Mode module allows developers to create a flicker-free chat history interface. Starting from z-paging v2.7.0, this is implemented using a 'list inversion' method, which offers a better user experience and supports integration with virtual lists.
Compatibility Warning: The new chat record mode (v2.7.0+) is NOT supported on Android versions below 9 or iOS versions below 15. To support these older systems, you must use z-paging v2.6.9 or earlier.
z-paging-swiper as the root node. It acts as a view container that defaults to full-screen, eliminating the need to manually calculate height when inserting it into a swiper's image/content container.:use-page-scroll="true", z-paging cannot automatically detect the page's scrollTop or when the bottom is reached. You must manually notify z-paging via page lifecycle events. This can be done using a mixin or by implementing the following methods in your page component.export default {
// Triggered by system pull-down refresh
onPullDownRefresh() {
// Reload the list
this.$refs.paging.reload().catch(() => {});
},
// Triggered on page scroll
onPageScroll(e) {
// Update internal scrollTop to determine if pull-down refresh is allowed
this.$refs.paging.updatePageScrollTop(e.scrollTop);
// Trigger load more for chat record mode if at the top
if (e.scrollTop < 10) {
this.$refs.paging.doChatRecordLoadMore();
}
},
// Triggered when page reaches bottom
onReachBottom() {
// Notify z-paging to handle load more data
this.$refs.paging.pageReachBottom();
}
}In nvue, z-paging is rendered as a <list /> tag by default to optimize resource recovery for invisible parts, providing better performance than view or scroll-view. Because it uses <list />, all direct children within z-paging must be <list /> compatible components such as <cell /> or <header />.
Key constraints for nvue lists:
<cell /> for list items. Note that <cell /> is only for nvue; for cross-platform compatibility (rendering as <cell /> in nvue and <view /> in vue), use the <z-paging-cell /> tag.v-for directive must be placed directly on the <cell /> tag, not on an element inside it.index as the unique :key identifier.<z-paging ref="paging" v-model="dataList" @query="queryList">
<cell class="item" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)">
<text class="item-title">{{item.title}}</text>
</cell>
</z-paging>To invoke z-paging methods, assign a ref attribute to the z-paging component (e.g., ref="paging") and call the method via this.$refs.paging.methodName().
Important Constraint: In the Page's onLoad() method, this.$refs is not available synchronously. To call a z-paging method during page load, wrap the call in a setTimeout with a 1ms delay or use this.$nextTick(). Note that reload() is typically called automatically on page load, so manual invocation is often unnecessary.
// In onLoad
onLoad() {
this.$nextTick(() => {
this.$refs.paging.someMethod();
});
}z-paging-mini.# 1. Download the zip file
# 2. Unzip the contents
# 3. Copy the code to the /uni_modules/ directory
# (Or copy to /node_modules/ if using npm installation)