____ _ __ __ _ __ _(_)_ __ __ _
|_ /____| '_ \ / _` |/ _` | | '_ \ / _` |
/ /_____| |_) | (_| | (_| | | | | | (_| |
/___| | .__/ \__,_|\__, |_|_| |_|\__, |
|_| |___/ |___/ 文档
—————————————————————————————————————————————————
v2.8.6 (2025-03-17)
@author ZXLee <admin@zxlee.cn>
感谢使用^_^
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 👍 为什么选择z-paging？
💧
像喝水一样简单！
仅需两步即可实现完整下拉刷新和上拉加载更多功能，分页全自动管理！亦可通过极少代码轻松完成标准页面容器布局。应用灵活且广泛。
⚒️
丰富的自定义配置！
支持自定义下拉刷新、上拉加载更多，支持自动管理空数据图，支持下拉进入二楼，支持聊天分页、本地分页，支持国际化等数百项个性化配置。
🚀
高性能！
使用wxs+renderjs在视图层实现下拉刷新，丝滑流畅零卡顿。强大的兼容各平台的虚拟列表算法，轻松渲染百万级列表数据。底层细节优化及兼容处理。
🌍
全平台兼容！
支持ios、安卓、鸿蒙Next；h5；微信小程序、QQ小程序、支付宝小程序、抖音小程序、百度小程序、快手小程序、飞书小程序、快应用等十几个平台。
🔥
热门且流行！
在插件市场+npm中已被开发者下载超10万次，质量、扩展性和稳定性经过数万个项目检验。在uniapp插件市场热门总榜中稳定排名前十。
🌟
广受好评且可靠！
由2021年开源至今已迭代100+个版本，在插件市场评分4.8/5.0分。建有总计容纳近万人的使用答疑QQ群。遵循MIT开源协议，商用无需任何授权和费用。
# ⭐️ 开源不易~ 如果您觉得z-paging还不错的话，可以点一个star鼓励一下(＾ω＾)👉🏻 
(opens new window)
# 基本使用
<template>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
<view class="item" v-for="(item,index) in dataList" :key="index">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</template>
<script>
export default {
data() {
return {
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
dataList: []
};
},
methods: {
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
queryList(pageNo, pageSize) {
// 此处请求仅为演示，请替换为自己项目中的请求
this.$request.queryList({ pageNo,pageSize }).then(res => {
// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
this.$refs.paging.complete(res.data.list);
}).catch(res => {
// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
}
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
<view class="item" v-for="(item,index) in dataList" :key="index">
<view class="item-title">{{item.title}}</view>
</view>
</z-paging>
</template>
<script setup>
import { ref } from 'vue';
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
// 此处请求仅为演示，请替换为自己项目中的请求
request.queryList({ pageNo,pageSize }).then(res => {
// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
paging.value.complete(res.data.list);
}).catch(res => {
// 如果请求失败写paging.value.complete(false);
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
paging.value.complete(false);
})
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Copyright 2021-2025 z-paging | 闽ICP备17015849号-1