+
98
-

uniapp如何实现虚拟列表上下滚动技术?

uniapp如何实现虚拟列表上下滚动技术?


网友回复

+
24
-

我写了一个代码实现了uniapp的虚拟列表滚动加载,

代码说明:

totalItems:整个列表的数据,示例中用的是 1000 条数据。

visibleItemCount:设定在可视区域最多显示的条目数。

buffer:设定滚动缓冲区,这样可以在实际滚动时减少抖动。

visibleItems:计算当前需要显示的条目,截取 totalItems 的一部分。

topBlankHeight 和 bottomBlankHeight:计算上下两部分占位的空白高度

<template>
  <view class="container">
    <scroll-view
      class="scroll-view"
      scroll-y
      @scroll="onScroll"
      :scroll-top="scrollTop"
    >
      <!-- 占位的顶部空白区域 -->
      <view :style="{ height: topBlankHeight + 'px' }"></view>

      <!-- 实际显示的内容 -->
      <view
        v-for="(item, index) in visibleItems"
        :key="item.id"
        class="item"
      >
        {{ item.text }}
      </view>

      <!-- 占位的底部空白区域 -->
      <view :style="{ height: bottomBlankHeight + 'px' }"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalItems: [], // 原始数据
      itemHeight: 60, // ...

点击查看剩余70%

我知道答案,我要回答