效果图:
虚拟列表 只对可见区域进行渲染,对非可见区域中的数据不渲染或部分渲染,以实现减少消耗,提高用户体验的技术。它是长列表的一种优化方案,性能良好。当数据体量极大时,使用虚拟列表,可以极大减少节点的渲染,体验丝滑。
<template>
<view>
<!--height值为所有数据总高-->
<view :style="{height: itemHeight*(listAll.length) + 'px', position: 'relative'}">
<!--可视区域里所有数据的渲染区域-->
<view :style="{position: 'absolute', top: top + 'px'}">
<!--单条数据渲染区域-->
<view class="item" v-for="(item,index) in showList" :key="index" >
<image src="../../static/01.png" mode="aspectFill" style="height: 100px; width: 100px;"></image>
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
listAll: [], //所有数据
showList: [], //可视区域显示的数据
itemHeight: 105, //每条数据所占高度
showNum: 10, //每次加载到可视区域的数量,itemHeight X showNum 要大于屏幕高度 ,否则页面滚动不了。
top: 0, //偏移量
scrollTop: 0, //卷起的高度
startIndex: 0, //可视区域第一条数据的索引
endIndex: 0, //可视区域最后一条数据后面那条数据的的索引,因为后面要用slice(start,end)方法取需要的数据,但是slice规定end对应数据不包含在里面
}
},
/*页面滚动事件*/
onPageScroll(e) {
this.scrollTop = e.scrollTop
this.getShowList()
},
onLoad() {
this.getAllList()
this.getShowList()
},
methods:{
//构造2万条数据
getAllList(){
for(let i=0;i<20000;i++){
this.listAll.push(`我是第${i}号佳丽`)
}
},
//计算可视区域数据
getShowList(){
this.startIndex = Math.floor(this.scrollTop/this.itemHeight); //可视区域第一条数据的索引
this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引
this.showList = this.listAll.slice(this.startIndex, this.endIndex) //可视区域显示的数据,即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1
this.top = this.scrollTop - (this.scrollTop % this.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量,这样随机滑动时第一条数据都是完整显示的
}
}
}
</script>
<style scoped>
.item{
height:105px;
padding: 5px;
color: #666;
box-sizing: border-box;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。