Vue框架下的虚拟列表

原生虚拟列表

固定列表高度的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .list-wrap{
  8.             position: relative;
  9.             overflow-y: scroll;
  10.             width: 200px;
  11.             margin: 100px auto;
  12.             box-sizing: border-box;
  13.             border: solid 1px red;
  14.         }
  15.         .list{
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.         }
  20.         .list li{
  21.             border: solid 1px blue;
  22.             line-height: 30px;
  23.         }
  24. </style>
  25. </head>
  26. <body>
  27. <ul id="app">
  28.     <div class="list-wrap" ref="listWrap" @scroll="scrollListener">
  29.         <!-- 利用scroll-bar将盒子的高度撑开 -->
  30.         <div class="scroll-bar" ref="scrollBar"></div>
  31.         <!-- 展示可视化区域的列表 -->
  32.         <ul class="list" ref="list">
  33.             <li v-for="val in showList">{{val}}</li>
  34.         </ul>
  35.     </div>
  36. </ul>
  37. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  38. <script>
  39.     new Vue({
  40.         el: '#app',
  41.         data(){
  42.             return {
  43.                 list: [],//超长的显示数据
  44.                 itemHeight: 30,//每一列的高度
  45.                 showNum: 10,//显示几条数据
  46.                 start: 0,//滚动过程显示的开始索引
  47.                 end: 10,//滚动过程显示的结束索引
  48.             }
  49.         },
  50.         computed: {
  51.             //显示的数组，用计算属性计算
  52.             showList(){
  53.                 return this.list.slice(this.start, this.end);
  54.             }
  55.         },
  56.         mounted(){
  57.             //构造一个超长列表
  58.             for (let i = 0; i < 1000000; i++) {
  59.                 this.list.push('列表' + i)
  60.             }
  61.             //计算滚动容器高度
  62.             this.$refs.listWrap.style.height = this.itemHeight * this.showNum + 'px';
  63.             //计算总的数据需要的高度，构造滚动条高度
  64.             this.$refs.scrollBar.style.height = this.itemHeight * this.list.length + 'px';
  65.         },
  66.         methods: {
  67.             scrollListener(){
  68.                 //获取滚动高度
  69.                 let scrollTop = this.$refs.listWrap.scrollTop;
  70.                 //开始的数组索引
  71.                 this.start = Math.floor(scrollTop / this.itemHeight);
  72.                 //结束索引
  73.                 this.end = this.start + this.showNum;
  74.                 //绝对定位对相对定位的偏移量
  75.                 this.$refs.list.style.top = this.start * this.itemHeight + 'px';
  76.                 console.log(this.start, this.end)
  77.             }
  78.         }
  79.     })
  80. </script>
  81. </body>
  82. </html>

不固定列表高度的实现

参考：https://juejin.cn/post/6844903982742110216#heading-0

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Title</title>
  7.   <style>
  8.     html {
  9.       height: 100%;
  10.     }
  12.     body {
  13.       height: 100%;
  14.       margin: 0;
  15.     }
  17.     #app {
  18.       height: 100%;
  19.     }
  22.     .infinite-list-container {
  23.       overflow: auto;
  24.       position: relative;
  25.       -webkit-overflow-scrolling: touch;
  26.     }
  28.     .infinite-list-phantom {
  29.       position: absolute;
  30.       left: 0;
  31.       top: 0;
  32.       right: 0;
  33.       z-index: -1;
  34.     }
  36.     .infinite-list {
  37.       left: 0;
  38.       right: 0;
  39.       top: 0;
  40.       position: absolute;
  41.     }
  43.     .infinite-list-item {
  44.       padding: 5px;
  45.       color: #555;
  46.       box-sizing: border-box;
  47.       border-bottom: 1px solid #999;
  48.       /* height:200px; */
  49.     }
  50.   </style>
  51. </head>
  53. <body>
  54.   <div id="app">
  55.     <virtual-list :listdata="data" :estimateditemsize='85' v-slot="slotProps">
  56.       <item :item="slotProps.item" />
  57.     </virtual-list>
  58.   </div>
  59.   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  60.   <script>
  61.     // 全局组件
  62.     Vue.component('virtual-list', {
  63.       props: {
  64.         //所有列表数据
  65.         listdata: {
  66.           type: Array,
  67.           default: () => []
  68.         },
  69.         //预估高度
  70.         estimateditemsize: {
  71.           type: Number,
  72.           required: true
  73.         },
  74.         //容器高度 100px or 50vh
  75.         height: {
  76.           type: String,
  77.           default: "100%"
  78.         }
  79.       },
  80.       data() {
  81.         return {
  82.           //可视区域高度
  83.           screenHeight: 0,
  84.           //起始索引
  85.           start: 0,
  86.           //结束索引
  87.           end: 0
  88.         };
  89.       },
  90.       computed: {
  91.         // 所有的列表数据
  92.         _listData() {
  93.           return this.listdata.map((item, index) => {
  94.             return {
  95.               _index: `_${index}`,
  96.               item
  97.             };
  98.           });
  99.         },
  100.         // 可视区域可以渲染数据的条数
  101.         visibleCount() {
  102.           return Math.ceil(this.screenHeight / this.estimateditemsize);
  103.         },
  104.         // 可视区域渲染的数据
  105.         visibleData() {
  106.           return this._listData.slice(this.start, this.end);
  107.         }
  108.       },
  109.       created() {
  110.         this.initPositions();
  111.       },
  112.       mounted() {
  113.         this.screenHeight = this.$el.clientHeight;
  114.         this.start = 0;
  115.         this.end = this.start + this.visibleCount;
  116.       },
  117.       updated() {
  118.         this.$nextTick(function () {
  119.           if (!this.$refs.items || !this.$refs.items.length) {
  120.             // 没有已经渲染的数据则不进行下面的操作
  121.             return;
  122.           }
  123.           //获取真实元素大小，修改对应的尺寸缓存
  124.           this.updateItemsSize();
  125.           //更新列表总高度
  126.           let height = this.positions[this.positions.length - 1].bottom;
  127.           this.$refs.phantom.style.height = height + "px";
  128.           //更新真实偏移量
  129.           this.setStartOffset();
  130.         });
  131.       },
  132.       methods: {
  133.         initPositions() {
  134.           // 记录每一条数据的相关信息,每一条数据使用预估高度
  135.           this.positions = this.listdata.map((d, index) => ({
  136.             index,
  137.             height: this.estimateditemsize,
  138.             top: index * this.estimateditemsize,
  139.             bottom: (index + 1) * this.estimateditemsize
  140.           }));
  141.         },
  142.         //获取列表起始索引
  143.         getStartIndex(scrollTop = 0) {
  144.           //二分法查找
  145.           return this.binarySearch(this.positions, scrollTop);
  146.         },
  147.         //二分法查找
  148.         binarySearch(list, value) {
  149.           let start = 0;
  150.           let end = list.length - 1;
  151.           let tempIndex = null;
  152.           while (start <= end) {
  153.             let midIndex = parseInt((start + end) / 2);
  154.             let midValue = list[midIndex].bottom;
  155.             if (midValue === value) {
  156.               return midIndex + 1;
  157.             } else if (midValue < value) {
  158.               start = midIndex + 1;
  159.             } else if (midValue > value) {
  160.               if (tempIndex === null || tempIndex > midIndex) {
  161.                 tempIndex = midIndex;
  162.               }
  163.               end = end - 1;
  164.             }
  165.           }
  166.           return tempIndex;
  167.         },
  168.         //获取列表项的当前尺寸
  169.         updateItemsSize() {
  170.           let nodes = this.$refs.items;
  171.           nodes.forEach(node => {
  172.             let rect = node.getBoundingClientRect();
  173.             let height = rect.height;
  174.             let index = +node.id.slice(1);
  175.             let oldHeight = this.positions[index].height;
  176.             let dValue = oldHeight - height;
  177.             //存在差值
  178.             if (dValue) {
  179.               this.positions[index].bottom = this.positions[index].bottom - dValue;
  180.               this.positions[index].height = height;
  182.               for (let k = index + 1; k < this.positions.length; k++) {
  183.                 this.positions[k].top = this.positions[k - 1].bottom;
  184.                 this.positions[k].bottom = this.positions[k].bottom - dValue;
  185.               }
  186.             }
  187.           });
  188.         },
  189.         //获取当前的偏移量
  190.         setStartOffset() {
  191.           let startOffset =
  192.             this.start >= 1 ? this.positions[this.start - 1].bottom : 0;
  193.           this.$refs.content.style.transform = `translate3d(0,${startOffset}px,0)`;
  194.         },
  195.         //滚动事件
  196.         scrollEvent() {
  197.           //当前滚动位置
  198.           let scrollTop = this.$refs.list.scrollTop;
  199.           //此时的开始索引
  200.           this.start = this.getStartIndex(scrollTop);
  201.           //此时的结束索引
  202.           this.end = this.start + this.visibleCount;
  203.           //此时的偏移量
  204.           this.setStartOffset();
  205.         }
  206.       },
  207.       template: `<div ref="list" :style="{height}" class="infinite-list-container" @scroll="scrollEvent($event)">
  208.                   <div ref="phantom" class="infinite-list-phantom"></div>
  209.                   <div ref="content" class="infinite-list">
  210.                     <div
  211.                       class="infinite-list-item"
  212.                       ref="items"
  213.                       :id="item._index"
  214.                       :key="item._index"
  215.                       v-for="item in visibleData"
  216.                     >
  217.                       <slot ref="slot" :item="item.item"></slot>
  218.                     </div>
  219.                   </div>
  220.                 </div>`
  221.     })
  223.     Vue.component('item', {
  224.       props: {
  225.         //所有列表数据
  226.         item: {
  227.           type: Object,
  228.           default: () => {}
  229.         }
  230.       },
  231.       template: `
  232.       <p>
  233.         <span style="color:red">{{item.id}}</span>
  234.         {{item.value}}
  235.       </p>
  236.       `
  237.     })
  239.     new Vue({
  240.       el: '#app',
  241.       data() {
  242.         let data = [];
  243.         for (let id = 0; id < 1000; id++) {
  244.           data.push({
  245.             id,
  246.             value: 'Earum illum esse dolor. Vel reiciendis nisi sit qui ipsam et. Ea at nihil officiis odio. Iste voluptate earum nobis non architecto id corporis ea. Est ullam repellendus dolor fugit numquam veniam omnis.' // 长文本
  247.           });
  248.         }
  249.         return {
  250.           // 虚拟滚动的所有列表数据
  251.           data
  252.         }
  253.       },
  254.       mounted() {}
  255.     })
  256.   </script>
  257. </body>
  259. </html>

React框架下的虚拟列表