z-paging

<z-paging ref="paging" :virtual-list-col="2" @query="queryList">
  <view v-for="item in dataList" :key="item.id">
    {{ item.name }}
  </view>
</z-paging>

# 方式1: npm 安装
npm install z-paging

# 方式2: uni_modules 安装（推荐）
# 从 DCloud 插件市场导入：https://ext.dcloud.net.cn/plugin?name=z-paging

<template>
  <z-paging ref="paging" @query="queryList">
    <!-- 列表内容 -->
    <view v-for="item in dataList" :key="item.id" class="item">
      <text>{{ item.title }}</text>
      <text class="desc">{{ item.description }}</text>
    </view>
  </z-paging>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    // z-paging 自动调用此方法（首次加载、下拉刷新、上拉加载）
    queryList(pageNo, pageSize) {
      // 发起网络请求
      uni.request({
        url: 'https://api.example.com/list',
        data: { page: pageNo, size: pageSize },
        success: (res) => {
          // 将请求结果传给 z-paging
          this.$refs.paging.complete(res.data.list)
        },
        fail: () => {
          // 请求失败处理
          this.$refs.paging.complete(false)
        }
      })
    }
  }
}
</script>

<template>
  <z-paging
    ref="paging"
    :refresher-enable="true"
    :custom-refresher="true"
    @query="queryList"
  >
    <!-- 自定义下拉刷新视图 -->
    <template #refresher="{ state }">
      <view class="custom-refresher">
        <text v-if="state === 0">下拉刷新</text>
        <text v-if="state === 1">松开立即刷新</text>
        <text v-if="state === 2">刷新中...</text>
      </view>
    </template>

    <!-- 列表内容 -->
    <view v-for="item in dataList" :key="item.id">
      {{ item.name }}
    </view>
  </z-paging>
</template>

<template>
  <!-- 聊天模式：新消息插入顶部，自动滚动到底部 -->
  <z-paging
    ref="paging"
    :use-chat-record-mode="true"
    @query="queryList"
  >
    <view v-for="msg in chatList" :key="msg.id" class="chat-item">
      <text>{{ msg.content }}</text>
    </view>
  </z-paging>
</template>