【求助】本地虚拟列表配置

[llk2yq]

请描述您在使用期间遇到的疑问

本地有一个很大的列表list，会不断地新增到列表顶部（也就是unshift插入列表），无需下拉刷新，主要的目的是减少同时渲染的元素。

1、请问该如何配置 2、当每次有新增时，是否需要调用什么方法

非常感谢~

[SmileZXLee]

可结合本地分页使用。本地分页只要把普通模式的complete改成setLocalPaging即可

[llk2yq]

@SmileZXLee 那每次列表变化时，需要重新setLocalPaging吗？

[SmileZXLee]

@SmileZXLee 那每次列表变化时，需要重新setLocalPaging吗？

列表变化具体是指什么，如果整个列表刷新需要调用z-paging的reload方法去刷新，reload方法会触发queryList，setLocalPaging是写在queryList中的，因此自然会触发setLocalPaging。如果是往数组顶部插入元素不需要每次调用setLocalPaging，使用z-paging自带的从顶部添加数据的方法即可。注意虚拟列表动态高度的话，从顶部添加数据后要调用相关刷新缓存高度的方法，具体参见文档。

[llk2yq]

    <z-paging ref="paging" use-virtual-list :force-close-inner-list="true" @virtualListChange="virtualListChange">
          <template #header>
              <view>这里是header</view>
          </template>
          <!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
          <!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
          <view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item, index) in dataList">
              {{ item.zp_index }}
          </view>
      </z-paging>

又遇到一个问题，上面代码参考了文档中的虚拟列表的示例，但是header并不会显示，把:force-close-inner-list="true"去掉就能显示了。

[SmileZXLee]

    <z-paging ref="paging" use-virtual-list :force-close-inner-list="true" @virtualListChange="virtualListChange">
          <template #header>
              <view>这里是header</view>
          </template>
          <!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
          <!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
          <view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item, index) in dataList">
              {{ item.zp_index }}
          </view>
      </z-paging>

又遇到一个问题，上面代码参考了文档中的虚拟列表的示例，但是header并不会显示，把:force-close-inner-list="true"去掉就能显示了。

这里其实不需要header，header只有使用#cell时候才需要，这里你直接放一个普通view即可

[llk2yq]

header这部分是sticky定位的，放在这里会有bug...在另一个issue里我看到有人提了。

[SmileZXLee]

header这部分是sticky定位的，放在这里会有bug...在另一个issue里我看到有人提了。

嗯嗯 吸顶这个错位是由于虚拟列表的机制修改了transformTop导致的，暂时无法处理，我有空研究看看有没有其他解决方案

[llk2yq]

paging.value.setLocalPaging([
  // 初始化时只有一个元素
])

// 模拟业务，隔一段时间插入一个元素
setInterval(() => {
    paging.value.addDataFromTop({
        // 顶部插入一个元素
    });
}, 1000)

请问一下我这样写，为什么无法触发下滑展示更多？addDataFromTop应该是触发了的，因为我看到一直有动画滑动到顶部，但是手动滚动到底部时没有触发加载更多？是哪里没配置或没写吗？

[llk2yq]

header这部分是sticky定位的，放在这里会有bug...在另一个issue里我看到有人提了。

嗯嗯 吸顶这个错位是由于虚拟列表的机制修改了transformTop导致的，暂时无法处理，我有空研究看看有没有其他解决方案

这个我暂时是把header部分写到外面，然后给.z-paging-content的top设置为header部分的高度。

[SmileZXLee]

paging.value.setLocalPaging([
  // 初始化时只有一个元素
])

// 模拟业务，隔一段时间插入一个元素
setInterval(() => {
    paging.value.addDataFromTop({
        // 顶部插入一个元素
    });
}, 1000)

请问一下我这样写，为什么无法触发下滑展示更多？addDataFromTop应该是触发了的，因为我看到一直有动画滑动到顶部，但是手动滚动到底部时没有触发加载更多？是哪里没配置或没写吗？

可能是z-paging判断你没有更多数据了，判断更多数据的依据是分页的时候，你complete传入的数组长度小于pageSize就没有更多数据了。如果是setLocalPaging的话可能就是你的数据量过少导致滚动到顶部无法加载更多数据了

[llk2yq]

paging.value.setLocalPaging([
  // 初始化时只有一个元素
])

// 模拟业务，隔一段时间插入一个元素
setInterval(() => {
    paging.value.addDataFromTop({
        // 顶部插入一个元素
    });
}, 1000)

请问一下我这样写，为什么无法触发下滑展示更多？addDataFromTop应该是触发了的，因为我看到一直有动画滑动到顶部，但是手动滚动到底部时没有触发加载更多？是哪里没配置或没写吗？

可能是z-paging判断你没有更多数据了，判断更多数据的依据是分页的时候，你complete传入的数组长度小于pageSize就没有更多数据了。如果是setLocalPaging的话可能就是你的数据量过少导致滚动到顶部无法加载更多数据了

那请问要怎么处理呀，我目前的场景就是初始一个空列表，然后会不停地往列表里加相同的item，会加大约几千个，类似pc端table里的虚拟表格。