vue实现虚拟列表滚动

csharp 复制代码
<template>
<div class="cont">
//box 视图区域Y轴滚动 滚动的是box盒子 滚动条显示的也是因为box
  <div class="box">
  //itemBox。 一个空白的盒子 计算高度为所有数据的高度 固定每一条数据高度为50px
    <div class="itemBox" :style="{height:list.length*50+'px'}">
      <div v-for="(v,i) in showList" :style='{top: `${v.top}px`}' class="item" :key="i">{{ v.name }}</div>
    </div>
  </div>
</div>
</template>
csharp 复制代码
<script>
export default {
  data() {
    return {
      list: [],   //实际数据
      showList: [],  //渲染数据
    }
  },
  methods: {
  //滚动事件 动态去截取数据塞进showList
    handleScroll() {
      let box = document.querySelector('.box')
      let scrollTop = box.scrollTop
      let num = Math.ceil(scrollTop / 50)
      let arr = this.list.slice(num, num + 20)
      arr.forEach((v, i) => {
        v.top = (num + i) * 50 //动态计算每一条数据的位置
      })
      this.showList = arr
    }
  },
  mounted() {
  //模拟生产10000条数据
    for (let i = 0; i < 10000; i++) {
      this.list.push({
        name: '测试测试测' + i,
      })
    }
    //注册滚动事件
    let box = document.querySelector('.box')
    box.addEventListener('scroll', this.handleScroll)
    //初始渲染数据
    let arr = this.list.slice(0, 20)
    arr.forEach((v, i) => {
      v.top = i * 50
    })
    this.showList = arr
  }

}
</script>
csharp 复制代码
<style lang="scss" scoped>
.box {
  width: 600px;
  height: 800px;
  overflow-y: auto;
  background-color: #eee;
  margin: 0 auto;
  .itemBox {
    position: relative;
    .item {
      height: 50px;
      line-height: 50px;
      position: absolute;
    }
  }

}
</style>



dom中始终只显示20条dom数据,只适用固定行高度的场景

相关推荐
啵啵学习4 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia10 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia11 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder27 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh33 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_8784545335 分钟前
thymeleaf的使用和小结
前端·javascript·学习
brzhang43 分钟前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github
2301_7994049143 分钟前
AJAX 介绍
前端·ajax·axios
脚本语言_菜鸟44 分钟前
音频转base64
android·javascript·音视频
拖孩1 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js