【uni-app】z-paging分页组件实战：从配置到性能优化的全流程解析

1. z-paging分页组件快速入门

第一次接触z-paging时，我也被它丰富的功能列表吓到了。但实际用起来才发现，这个uni-app生态里最受欢迎的分页组件，配置起来比想象中简单得多。先来看个最基础的实现场景：假设我们要做一个新闻列表页面，只需要完成两个关键步骤：

1. 在模板中绑定分页请求方法
2. 通过v-model绑定数据列表

javascript复制<template>
  <view class="news-container">
    <z-paging ref="paging" v-model="newsList" @query="loadNews">
      <view v-for="(item, index) in newsList" :key="index" class="news-item">
        <text>{{ item.title }}</text>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  methods: {
    async loadNews(pageNo, pageSize) {
      try {
        const res = await api.getNewsList({ pageNo, pageSize })
        this.$refs.paging.complete(res.data.list)
      } catch (e) {
        this.$refs.paging.complete(false)
      }
    }
  }
}
</script>

这里有几个新手容易踩的坑：

• 绝对不要在请求回调里直接给newsList赋值，必须通过complete方法传递数据
• 请求失败时要调用complete(false)来触发错误状态显示
• nvue环境下必须用cell包裹列表项（普通vue环境不用）

我建议初次使用时，先通过插件市场安装。在HBuilderX的插件市场搜索"z-paging"，导入