<template>
    <div class="scrollParent" ref="scrollContent" @scroll="handleScroll">
        <div :style="blankFillStyle">
            <div v-for="item,index in showDataList" :key="index">
                <slot :everyVirtual="item"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
? ? props:["oneHeight","virtualList"],
? ? data () {
? ? ? ? return {
? ? ? ? ? ? contentSize:"", //可視區(qū)域可以展示多少條數據
? ? ? ? ? ? startIndex:0, //記錄當前滾動的第一個元素的索引
? ? ? ? ? ? currentScroll:0, ?//記錄當前滾動的距離
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? // 獲取可視區(qū)域可以展示多少條
? ? ? ? getContentSize(){
? ? ? ? ? ? // 兩次取反可以獲取到整數部分
? ? ? ? ? ? this.contentSize = ~~(this.$refs.scrollContent.offsetHeight / this.oneHeight) + 2;
? ? ? ? },
? ? ? ? // 監(jiān)聽滾動條
? ? ? ? handleScroll(){
? ? ? ? ? ? // 持續(xù)滾動 ?減少變量重新賦值 ?優(yōu)化處理 只有在到下一個元素節(jié)點的時候才會重新給this.statrIndex賦值 ?避免和this.startIndex相關聯的數據再次計算
? ? ? ? ? ? this.currentScroll = this.$refs.scrollContent.scrollTop;
? ? ? ? ? ? let currentIndex = ~~(this.$refs.scrollContent.scrollTop/this.oneHeight);
? ? ? ? ? ? if(this.startIndex == currentIndex){
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? this.startIndex = currentIndex;
? ? ? ? ? ? if((this.startIndex + this.contentSize - 1)>this.virtualList.length-1){ //說明到達底部了
? ? ? ? ? ? ? ? this.$emit("scrollEnd")
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? activated(){
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ? this.$refs.scrollContent.scrollTop = this.currentScroll;
? ? ? ? })
? ? },
? ? computed:{
? ? ? ? endIndex(){ //獲取最后一個元素的索引
? ? ? ? ? ? let endIndex = this.startIndex + this.contentSize*2;
? ? ? ? ? ? if(endIndex>this.virtualList.length-1){
? ? ? ? ? ? ? ? endIndex = this.virtualList.length-1
? ? ? ? ? ? }
? ? ? ? ? ? return endIndex;
? ? ? ? },
? ? ? ? showDataList(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return this.virtualList.slice(startIndex,this.endIndex);
? ? ? ? },
? ? ? ? blankFillStyle(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? paddingTop:startIndex * this.oneHeight + "px",
? ? ? ? ? ? ? ? paddingBottom:(this.virtualList.length - this.endIndex) * this.oneHeight +"px"
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? window.onresize = this.getContentSize();
? ? ? ? window.orientationchange = this.getContentSize();
? ? }
}
</script>

<style scoped>
? ? .scrollParent{
? ? ? ? height: 100%;
? ? ? ? width: 100%;
? ? ? ? overflow-y: auto;
? ? }
</style>

npm install --save vue-virtual-scroll-list@1.1.3

import VirtualList from "vue-virtual-scroll-list";

components: {
    VirtualList,//注冊組件
  },

          <div class="content-timeview_box">
            <!-- size代表行高 remain代表一次渲染的數量 -->
            <!-- 出現的問題：1.在時間視圖時（文件夾視圖只有一個VirtualList不受影響） 一個日期代表一個VirtualList 怎么解決高度問題？ -->
            <!-- 如果統(tǒng)一高度？一個日期中的文件數量少于高度 就會出現VirtualList之間的空白問題 -->
            <!-- 應該根據日期下的文件數量來動態(tài)的綁定每一個VirtualList的高度 -->
          <VirtualList
          :size="40"
          :remain="17" 
          :wclass="vuesrollboxviewClass"
          :tobottom="toBottom"
          style="padding: 0 32px 0 32px"
          :style="{height:itembig.items.length>6?scrollbarheight:'200px'}"
        >

    //滾到底部時觸發(fā)
    //注：此方法在1.0高版本不兼容，只能在官方文檔1.1.3版本中使用
    //@1.1.3
    toBottom() {
      this.infiniteHandler();
    },

:wclass=“vuesrollboxviewClass”