vue 虚拟列表

原理,只有在屏幕部分元素被显示出来,并且被更新,所以始终只有固定数量的节点,不会卡顿在这里插入图片描述

步骤
(1) 生成多个元素的options, 或者动态获取
(2) 计算scrollTop, 就是滚动条滑块的位置高度
(3) min为显示数组索引最小值, min 与 scrollTop 对应关系:
min = Math.ceil(scrollTop / itemHeight)
为了不显示空白元素,上面会隐藏两个元素(-2), 下面也会隐藏两个元素(8+2)
(4) 滚动的时候修改显示的列表,屏幕显示列表为options.slice(min-2, min+10)

代码

<template>
  <div
  class="list"
  ref="listRef"
  @scroll.passive="getScroll($event)">
    <div :style="{height:itemHeight * options.length + 'px', width:'100%'}">
      <div class="item"
        v-for="(item,index) in options.slice(min-2, min+10)"
        :key="index"
        :style="{top:`${itemHeight*item.label}px`, backgroundImage: `url(${item.img})`}"
        >{{ item.value }} : {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref} from 'vue'

let itemHeight = 80;
let min = ref(2)
const getScroll = (event) => {
  console.log('[long] scrollTop: ', event.target.scrollTop)
  let scrollTop = event.target.scrollTop

  if (scrollTop > 2* itemHeight) {
    min.value = Math.ceil(scrollTop / itemHeight)
  } else {
    min.value = 2
  }
}

const options = ref(
  Array.from({ length: 10000 }, (_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${idx}`,
    img: function(){
      return [
      '../src/assets/pic1.jpg',
      '../src/assets/pic2.webp',
      '../src/assets/pic3.jpeg',
      '../src/assets/pic4.jpg'
      ][idx % 4]
    }()
  }))
)
</script>


<style scoped lang="less">
@item_height: 80px;
.list {
  margin: 10px auto;
  width: 400px;
  height: 800px;
  overflow: auto;
  position: relative;
  .item {
    height: @item_height;
    line-height: @item_height;
    position: absolute;
    width: 100%;
    background-repeat: 100% 100%;
  }
}
</style>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值