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

相关推荐
喝拿铁写前端17 分钟前
智能系统的冰山结构
前端
z_mazin22 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线26 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
清风絮柳29 分钟前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨1 小时前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器1 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts1 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w1 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos