<template>
? <div class="device">
? ? <div class="vir-scroll">
? ? ? <div class="scroll-Y" @scroll="scroll">
? ? ? ? <div class="parentDom">
? ? ? ? ? <!-- 占位，根據(jù)數(shù)據(jù)條數(shù)生成滾動(dòng)列表 -->
? ? ? ? ? <div :style="{ height: screenHeight + 'px' }"></div>
? ? ? ? ? ?<!-- 虛擬滾動(dòng)列表 -->
? ? ? ? ? <div class="positionRelative" :style="{ transform: getTransform }">
? ? ? ? ? ? <div class="scroll-item" v-for="item in visibleData" :key="item.index">
? ? ? ? ? ? ? <div class="scroll-info">helloworld</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? /** 數(shù)據(jù)列表 */
? ? ? dataList: [],
? ? ? /** 單行高度 */
? ? ? itemHeight: 143,
? ? ? /** 偏移高度 */
? ? ? startOffset: 0,
? ? ? /** 起始顯示數(shù)據(jù) */
? ? ? start: 0,
? ? ? /** 結(jié)束顯示數(shù)據(jù) */
? ? ? end: 10,
? ? }
? },
? computed: {
? ? /** 根據(jù)每條數(shù)據(jù)的高度獲取總列表高度 */
? ? screenHeight() {
? ? ? return this.dataList.length * this.itemHeight
? ? },
? ? /** 前面預(yù)留 */
? ? prevCount() {
? ? ? return 8
? ? },
? ? /** 后面預(yù)留 */
? ? nextCount() {
? ? ? return 25
? ? },
? ? /** 每次截取虛擬列表的位置 */
? ? getTransform() {
? ? ? return `translate(0,${this.startOffset}px)`
? ? },
? ? /** 虛擬數(shù)據(jù) */
? ? visibleData() {
? ? ? return this.dataList.slice(this.start, Math.min(this.end, this.dataList.length))
? ? },
? },
? methods: {
? ? /** 列表滾動(dòng)，暫時(shí)不節(jié)流，因?yàn)闈L動(dòng)快觸發(fā)次數(shù)就少，容易導(dǎo)致沒(méi)有及時(shí)更新數(shù)組導(dǎo)致白屏 */
? ? scroll(e) {
? ? ? this.scrollThrottle(e.target.scrollTop)
? ? },
? ? /** 滾動(dòng)函數(shù) */
? ? scrollThrottle(scrollTop) {
? ? ? const topCount = Math.floor(scrollTop / this.itemHeight) - this.prevCount
? ? ? // 此時(shí)的開(kāi)始索引
? ? ? this.start = topCount >= 0 ? topCount : 0
? ? ? // 此時(shí)的結(jié)束索引
? ? ? this.end = this.start + this.nextCount
? ? ? // 此時(shí)的偏移量
? ? ? this.startOffset = this.start * this.itemHeight
? ? },
? },
}
</script>
<style scoped lang="scss">
.device {
? .vir-scroll {
? ? // 脫離文檔流避免回流
? ? position: fixed;
? ? left: 0;
? ? width: 100%;
? ? height: calc(100% - 196px);
? ? padding: 0 16px;
? ? z-index: 10;

? ? .scroll-Y {
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? overflow-y: auto;

? ? ? .parentDom {
? ? ? ? position: relative;

? ? ? ? .positionRelative {
? ? ? ? ? width: 100%;
? ? ? ? ? position: absolute;
? ? ? ? ? left: 0;
? ? ? ? ? top: 0;
? ? ? ? ? border-radius: 5px;
? ? ? ? ? padding-bottom: 12.5px;

? ? ? ? ? .scroll-item {
? ? ? ? ? ? height: 143px;
? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? padding: 10px 15px 0px 15px;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>