uniapp 开发小程序虚拟长列表万条数据不卡顿

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. 区域滚动

可滚动视图区域 scroll-view 用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给添加white-space: nowrap;样式。

<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>