更新记录

1.0.1（2026-05-17） 下载此版本

fix：优化分页组件，增加自动返回顶部

平台兼容性

uni-app(5.08)

uni-app x(5.08)

jx-z-paging 使用说明

基于 IntersectionObserver 的分页加载组件，支持触底自动加载、返回顶部、自动回顶等功能。

基本用法

<jx-z-paging
  @on-load-more="loadMoreData"
  :total="dataInfo.total"
  :count="dataInfo.list.length"
>
  <view v-for="(item, index) in pageInfo.dataList" :key="item.id">
    <!-- 列表项内容 -->
  </view>
</jx-z-paging>

async function loadMoreData(done) {
  pageInfo.pagination.currentPage++;
  const res = await getList();
  dataInfo.total = res.count; // 用于控制是否显示"没有更多数据了"
  done(); // 调用回调通知加载完成
}

带新增按钮

<jx-z-paging
  @on-load-more="loadMoreData"
  :total="dataInfo.total"
  :count="dataInfo.list.length"
  :show-add="true"
  url="/page/add"
>
  <!-- 列表内容 -->
</jx-z-paging>

自定义插槽

<jx-z-paging
  @on-load-more="loadMoreData"
  :total="dataInfo.total"
  :count="dataInfo.list.length"
>
  <!-- 列表内容 -->
  <view v-for="item in list" :key="item.id">{{ item.name }}</view>

  <!-- 自定义加载中状态 -->
  <template #loading>
    <text>正在加载，请稍候...</text>
  </template>

  <!-- 自定义空数据状态 -->
  <template #empty>
    <text>暂无记录</text>
  </template>

  <!-- 自定义底部状态 -->
  <template #footer>
    <text>—— 到底了 ——</text>
  </template>
</jx-z-paging>

Props

Events

Slots

注意事项

• on-load-more 事件的回调函数 done() 必须在数据加载完成后调用，否则 loading 状态不会结束
• 组件依赖 uni-icons，请确保项目中已引入 uni-ui
• 返回顶部按钮在页面滚动离开顶部后自动显示