1. 页面滚动
虚拟列表 只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。当数据体量极大时，使用虚拟列表，可以极大减少节点的渲染，体验丝滑。
<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>
2. 区域滚动
文章来源：https://www.toymoban.com/news/detail-513634.html
可滚动视图区域 scroll-view 用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给添加white-space: nowrap;样式。文章来源地址https://www.toymoban.com/news/detail-513634.html
<template>
<view>
<scroll-view class="scroll-box" scroll-y="true" @scroll="scrollEvent">
<!--可视区域里所有数据的渲染区域-->
<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>
</scroll-view>
</view>
</template>
<script>
export default {
data(){
return{
listAll: [], //所有数据
showList: [], //可视区域显示的数据
itemHeight: 105, //每条数据所占高度
showNum: 6, //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
top: 0, //偏移量
scrollTop: 0, //卷起的高度
startIndex: 0, //可视区域第一条数据的索引
endIndex: 0, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面
}
},
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的偏移量，这样随机滑动时第一条数据都是完整显示的
},
//区域滚动事件
scrollEvent(e){
this.scrollTop = e.detail.scrollTop
this.getShowList()
}
}
}
</script>
<style scoped>
.item{
height:105px;
padding: 5px;
color: #666;
box-sizing: border-box;
}
.scroll-box{
height: 300px;
width: 99%;
position: relative;
border: 1px solid red;
margin-top: 100px;
}
</style>
到了这里，关于uniapp 开发小程序虚拟长列表万条数据不卡顿的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
