固定视图——后端返回大量数据，虚拟列表展示

 主要思路固定一个宽高 ， 后端返回数据 根据列表的高度来从数据中找到数据列表，把代码复制到vscode就能理解了，今天做微信小程序开发 订单列表觉得可以使用 但是还在探索怎么适配上去

<template>
  <div>
    <div
      class="home"
      :style="{ height: `${contentheight}px` }"
      @scroll="scroll"
    >
      <div
        :style="{
          height: `${itemheight * list.length}px`,
          position: 'relative',
        }"
      >
        <div :style="{ position: 'absolute', top: `${top}px` }">
          <div v-for="(item, index) in showlist" :key="index" class="item">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    {{ scrollTop }}
  </div>
</template>

<script>
export default {
  name: 'FivthXunilist',

  data() {
    return {
      list: [], //后端返回的1000条数据【模拟】
      scrollTop: 0, //卷起的高度
      showlist: [], //可视区的数据列表
      contentheight: 300, //可视区总高300
      itemheight: 30, //每条60，每页5个数据
      showNum: 0, //每页展示个数
      startindex: 0, //可视区第一条数据的索引
      enindex: 0, //最后一条数据的索引
      top: 0, //偏移量
    }
  },

  mounted() {
    this.getlist()
    this.scroll()
  },

  methods: {
    getlist() {
      for (let i = 0; i <= 1000; i++) {
        this.list.push(`我是第${i}条数据`)
      }
    },
    getshowlist() {
      this.showNum = Math.ceil(this.contentheight / this.itemheight) //每页展示条数
      this.startindex = Math.floor(this.scrollTop / this.itemheight) //开始数据的索引
      this.enindex = this.startindex + this.showNum //结束的索引
      this.showlist = this.list.slice(this.startindex, this.enindex)
      const offsetY = this.scrollTop - (this.scrollTop % this.itemheight)
      this.top = offsetY
      console.log(this.showlist, this.top, '=====this.showlist')
    },
    scroll() {
      this.scrollTop = document.querySelector('.home').scrollTop
      this.getshowlist()
    },
  },
}
</script>

<style  scoped>
.home {
  width: 200px;
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  overflow: auto;
}


.item {
  width: 100%;
  height: 25px;
  background: yellow;
  border-bottom: 1px solid red;
}
</style>

 

搬运链接：后端返回长列表数据——优化方案【虚拟列表】_后端 列表查询优化-CSDN博客