购物车页面，通过计算当前可视区域的商品和高度，用虚拟列表的方式只渲染可视区域内的数据
一个商品选项的高度
可视区域高度
展示商品的数量等于可视区域高度/一个商品选项的高度
滑动条距离顶部的距离
this.$el.clienHeight 水平滚动条的高度 (如果存在) ,不然就是屏幕高度

虚拟列表作用
只渲染出可视区域内的数据

讲一讲实现实现过程

首先通过给元素添加ref，.clientHeight获得可视区域高度,再设置列表每项高度,获得当前页面可展示多少项
监听onScroll事件触发时，通过ref获取滚动离顶部的距离scrolltop,
改变开始项和结束项从全部列表取数据到页面上进行渲染
监听虚拟列表滚动更换可视区内容

  1. <template>
  2.   <div id="app">
  3.     <!-- 包裹可视区域的可滚动的虚拟列表 -->
  4.     <div class="fictitious" @scroll="onScroll($event)" ref="ftwh" >
  5.       <!-- 占位元素，高度为总列表高度，提供滚动条，通过绝对定位脱离普通文档流不占父元素高度 -->
  6.       <div :style="{height: phantomHeight+'px'}" class="seize"></div>
  7.       <!-- 可视区域 -->
  8.       <div class="LookCant" :style="{transform: getTransform}">
  9.         <p  v-for="item of lookArr" :key="item" :style="{height: rowHeight +'px'}" class="pp">
  10.            {{item}}
  11.         </p>
  12.       </div>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   data(){
  20.     return {
  21.       //总列表数据
  22.       arr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99],
  23.       //可视高度
  24.       height: 0,
  25.       //列表元素高度
  26.       rowHeight: 100,
  27.       //开始索引
  28.       starItem:0,
  29.       //结束索引
  30.       endItem:0,
  31.       //滑动条离顶部距离
  32.       startOffset:0
  33.     }
  34.   },
  35.   methods: {
  36.     onScroll(){
  37.       if((this.$refs.ftwh.scrollTop/this.rowHeight+this.limit)>this.total){
  38.         this.endItem = this.total
  39.         return  false
  40.       }
  41.       this.startOffset = this.$refs.ftwh.scrollTop
  42.       this.starItem = Math.floor(this.startOffset/this.rowHeight);
  43.       this.endItem = this.starItem+this.limit;
  44.       console.log(this.lookArr);
  45.       console.log(this.startOffset);
  46.     }
  47.   },
  48.   computed:{
  49.     // 总条数
  50.     total(){
  51.       return this.arr.length;
  52.     },
  53.     //列表总高度
  54.     phantomHeight(){
  55.       return this.arr.length*this.rowHeight;
  56.     },
  57.     //可视范围内可展示元素数量
  58.     limit(){
  59.       return Math.ceil(this.height/this.rowHeight)
  60.     },
  61.     //真实显示的列表数据
  62.     lookArr(){
  63.       return this.arr.slice(this.starItem,Math.min(this.arr.length,this.endItem));
  64.     },
  65.     getTransform(){
  66.        return `translate(0,${this.startOffset}px)`;
  67.     }
  68.   },
  69.   mounted() {
  70.     this.height = this.$el.clientHeight;
  71.     this.starItem = 0;
  72.     this.endItem = this.starItem+this.limit;
  73.   },
  74. }
  75. </script>
  77. <style>
  78. html{
  79.   height: 100%;
  80. }
  81. body{
  82.   margin: 0;
  83.   padding: 0;
  84.   height: 100%;
  85. }
  86. #app{
  87.   height: 100%;
  88. }
  89. .fictitious{
  90.   height: 100%;
  91.   position: relative;
  92.   overflow-y:auto;
  93. }
  94. .pp{
  95.   box-sizing: border-box;
  96.   padding: 10px 0;
  97.   text-align: center;
  98.   background-color: #999;
  99.   margin: 0;
  100.   border-bottom: 1px solid #fff;
  101.   line-height: 100px;
  102. }
  103. .seize{
  104.   z-index: -1;
  105.   position: absolute;
  106.   top: 0;
  107.   left: 0;
  108.   right: 0;
  109. }
  110. </style>