【Vue】长列表实践

1. 基础构造

2. 实践

<style>
    .viewport{
      
      
        /* height: 400px; */
        overflow-y: scroll;
        position: relative;
        border: 1px solid gray;
    };
    
    .scrollbar{
      
      
        /* 全部高度 */
        /* height: 3000px; */
    }
    .list{
      
      
        position: absolute;
        left: 50%;
        top: 0;
    }
    .list-row{
      
      
        height: 20px;
    }
</style>
<div id="app">
 <!-- 外部视口 给固定高度不会被撑开 视口的高度是外来参数定义的-->
 <div ref="viewport" class="viewport" @scroll="onScroll">
     <!-- 滚动条 -->
     <div ref="scrollbar" class="scrollbar" ></div>
     <!-- 数据列表 -->
     <div class="list" :style="{ transform:`translateY(${offset}px)` }">
         <div class="list-row" :style="{height:height+'px'}" v-for="(item) in showList">
             {
   
   { item }}
         </div>
     </div>
 </div>
</div>

// 声明的假长列表数据
const bigList = new Array(100000).fill(null).map((value, index) => index + 1);
new Vue({
    
    
    methods: {
    
    
        onScroll(){
    
    
            // 滚动到处于现在的数据的显示的高度 
            this.offset = this.$refs.viewport.scrollTop;
            // 计算开始的索引
            this.start = Math.round(this.offset/this.height);
            // 结束的索引 向后20个
            this.end = this.start+this.viewCount;
        }
    },
    mounted() {
    
    
        // 视口高度
        this.$refs.viewport.style.height = (this.viewCount * this.height) + 'px';
        // 实际高度
        this.$refs.scrollbar.style.height = (this.list.length * this.height) + 'px';
    },
    computed:{
    
    
        showList(){
    
    
            // 列表所展示的
            return this.list.slice(this.start,this.end)
        }
    },
    el: "#app",
    data() {
    
    
        return {
    
    
            // 这些参数以后实践是从外来的参数引入
            list: bigList,
            // 开始的
            start: 0,
            // 结束的
            end: 20,
            // 展示多少条
            viewCount: 20,
            // 每条的高度
            height: 20,
            offset: 0,
        };
    },
});