更新记录

0.0.1（2026-05-02）

新增

• 新增分页刷新组件 zp-paging。
• 支持下拉刷新、上拉加载和页码分页。
• 支持 query 事件，由业务侧接管接口请求。
• 支持 complete(data, noMore) 和 completeByNoMore(data, noMore) 完成回调。
• 支持 fail(error) 失败回调、点击重试、空状态和无更多状态。

优化

• 补充完整首页 demo，覆盖重新加载、模拟失败、分页追加和无更多截图场景。
• 完善插件市场发布配置、平台兼容性、授权价格和文档说明。

注意

• 业务侧必须在 query 事件后调用 complete() 或 fail()，否则组件会保持加载状态。

平台兼容性

uni-app(5.08)

uni-app x(5.08)

其他

分页刷新组件

zhuanz-paging 提供下拉刷新、上拉加载和分页状态管理能力。

适合订单列表、消息列表、商品列表、内容信息流等需要“第一页刷新 + 后续页追加 + 空状态/错误重试”的业务场景。

组件

• zp-paging

核心能力

• 下拉刷新
• 上拉加载
• 页码分页
• query 事件接管业务请求
• complete(data, noMore) 完成加载
• completeByNoMore(data, noMore) 按无更多状态完成加载
• fail(error) 标记加载失败
• 空状态
• 无更多状态
• 错误重试

安装路径

uni_modules/zhuanz-paging

基础示例

<template>
  <zp-paging ref="paging" :page-size="10" @query="query">
    <template #default="{ list }">
      <view v-for="item in list" :key="item.id">
        {{ item.title }}
      </view>
    </template>
  </zp-paging>
</template>

<script>
export default {
  methods: {
    query({ pageNo, pageSize }) {
      requestList({ pageNo, pageSize })
        .then(res => {
          this.$refs.paging.complete(res.list, !res.hasNext)
        })
        .catch(err => {
          this.$refs.paging.fail(err)
        })
    }
  }
}
</script>

Props

Events

Methods

平台兼容性

• uni-app Vue2 / Vue3：支持
• H5：支持
• App Vue：支持
• 微信小程序：支持
• 支付宝小程序：支持
• uni-app x：支持 Web 和 App，需按实际项目运行环境验证

注意事项

• 业务侧必须在 query 事件后调用 complete() 或 fail()。
• 如果接口失败后不调用 fail()，组件会保持加载状态。
• 如果接口返回最后一页，请将 noMore 传 true。