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数据,只适用固定行高度的场景

相关推荐
然我11 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子16 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹20 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器26 分钟前
指定阿里镜像原理
前端
枷锁—sha31 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha32 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux