vue3模擬虛擬列表

vue3.0釋出了，剛好學習一下，仿照網上案例寫了一個虛擬列表

<template>
    <div class='virtual' @scroll="scroll" :style="{height:400+'px'}">
        {{itemHeight}}
        <div class="list" :style="{height:dataLengh*itemHeight+'px'}">
            <ul :style="{'margin-top':`${scrollTop}px`}">
                <li v-for="(item,index) in visiablelist"
                :key="index"
                :style="{height:itemHeight+'px'}"
                >
                    {{item}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {reactive,toRefs,computed} from 'vue'
export default {
    setup(prop,context){
    const dataLengh=100;
    const itemHeight=40;
     const data=reactive({
            scrollTop:0,
            startIndex:0,     
            endIndex:10,
           
    })
    function scroll(e){
            const scrollTop=e.target.scrollTop;
            data.scrollTop=e.target.scrollTop
            data.startIndex=Math.floor(scrollTop/itemHeight)
            data.endIndex=data.startIndex+10
        }
    const list=new Array(dataLengh)
    for(var i=0;i<list.length;i++){
        list[i]='這是第'+i+'段文字'
    }
    const visiablelist=computed(()=>{      
        return list.slice(data.startIndex,data.endIndex)})
        return {...toRefs(data),
                scroll,
                visiablelist,
                dataLengh,
                dataLengh,
                itemHeight
                }
    },
    
}
</script>
<style scoped>
.virtual{ border: solid 1px #eee;
  margin-top: 10px;
  height :400px;
  overflow :auto;}
.list{overflow: hidden;}
ul{  background: #ccc;
  list-style: none;
  padding: 0;
  margin: 0;}
li{ outline: solid 1px #fff;}
</style>