一、前言

在我们实际开发与应用中，列表是使用最多的一个组件，列表写的好不好那是非常影响我们小程序和网站的一个使用量的，如果量小还好，如果数据量大，随便一翻内存都拉爆了，那就证明老板该亏钱了

二、z-paging

1. z-paging是一个uni-app中全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化的一个组件。

三、下载组件

1. 下载组件ext.dcloud.net.cn/plugin?id=3…
2. 
3. 解压->更名z-paging->放入项目的uni_modules目录中

四、使用组件

1. 按照设计 js.design/f/Z8AOQj?p=… 我的购物车页写一个购物车

1. 购物车Item

按照设计先把购物车的每一个Item写出来

<script setup lang="ts">
    import {ref} from "vue";
    const value = ref<Number>()
</script>

<template>
  <view class="bg-white p-15 flex b-rd-40">
    <view class="mr-20">
      <image src="https://img.js.design/assets/img/6384d4523a4c0127ccb55505.png" class="h-240 b-rd-40"
             mode="heightFix"/>
    </view>

    <view class="w-full">
      <view class="flex flex-items-center flex-justify-between">
        <view class="mb-40">
          <view class="text-28 mb-20">棕色天鹅绒椅子</view>
          <view class="text-40">$ 130</view>
        </view>
        <view class="mr-50">
          <uni-icons type="trash" size="24" color="#9A9390" class="h-50"/>
        </view>
      </view>

      <view>
        <uni-number-box v-model="value"/>
      </view>
    </view>

  </view>
</template>

2. 简单实用z-paging

<script setup lang="ts">
import ShopCarItem from '@/components/shopCarItem/shopCarItem.vue'
import {ref} from "vue";

const dataList = ref([]), pagingRef = ref()

function queryList() {
  pagingRef.value.complete([1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5])
}
</script>

<template>
  <z-paging ref="pagingRef" v-model="dataList" @query="queryList" class="p-20">
    <template v-for="(item,index) in dataList">
      <ShopCarItem/>
    </template>
  </z-paging>
</template>

1. 这样简单使用的话没有使用到虚拟列表，只有下拉刷新，下滑加载操作，对于数据量少的完全够了，创建了180个dom

3. 使用虚拟列表 该写法只能使用在非微信小程序中

<script setup lang="ts">
import ShopCarItem from '@/components/shopCarItem/shopCarItem.vue'
import {ref} from "vue";

const pagingRef = ref()

function queryList() {
  pagingRef.value.complete([1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5])
}
</script>

<template>
  <z-paging ref="pagingRef" @query="queryList" use-virtual-list class="p-20">
    <template v-slot:cell="{item,index}">
      <ShopCarItem/>
    </template>
  </z-paging>
</template>

1. 在看dom只创建了61个，滑动起来页不卡顿了

4. 小程序兼容写法

1. 打开源码 /uni_modules/z-paging/components/z-paging/z-paging.vue 注释第99行，并把100行取消注释
2. 修改购物车页中的 z-paging

• use-compatibility-mode 兼容写法
• :extra-data="{id:'shopCar'}" 传递到Item的数据

<z-paging ref="pagingRef" @query="queryList"  class="p-20" use-virtual-list use-compatibility-mode
          :extra-data="{id:'shopCar'}"/>

3. 在 /src/components 目录下创建一个名为 zp-public-virtual-cell的组件 不能更名

<script setup lang="ts">
import ShopCarItem from '@/components/shopCarItem/shopCarItem.vue'

defineProps({
  item: null,
  index: Number,
  extraData: Object
})

</script>

<template>
  <ShopCarItem v-if="extraData?.id==='shopCar'"/>
</template>

4. 兼容模式完全可行

5. 其他配置 z-paging.com/api/props/c…

• auto-show-back-to-top 返回顶部按钮
• safe-area-inset-bottom 底部安全距离

6. 实操代码 gitee.com/zegege/t-un…