1. 頁面滾動(dòng)
虛擬列表 只對(duì)可見區(qū)域進(jìn)行渲染，對(duì)非可見區(qū)域中的數(shù)據(jù)不渲染或部分渲染，以實(shí)現(xiàn)減少消耗，提高用戶體驗(yàn)的技術(shù)。它是長(zhǎng)列表的一種優(yōu)化方案，性能良好。當(dāng)數(shù)據(jù)體量極大時(shí)，使用虛擬列表，可以極大減少節(jié)點(diǎn)的渲染，體驗(yàn)絲滑。
<template>
<view>
<!--height值為所有數(shù)據(jù)總高-->
<view :style="{height: itemHeight*(listAll.length) + 'px', position: 'relative'}">
<!--可視區(qū)域里所有數(shù)據(jù)的渲染區(qū)域-->
<view :style="{position: 'absolute', top: top + 'px'}">
<!--單條數(shù)據(jù)渲染區(qū)域-->
<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: [], //所有數(shù)據(jù)
showList: [], //可視區(qū)域顯示的數(shù)據(jù)
itemHeight: 105, //每條數(shù)據(jù)所占高度
showNum: 10, //每次加載到可視區(qū)域的數(shù)量，itemHeight X showNum 要大于屏幕高度 ，否則頁面滾動(dòng)不了。
top: 0, //偏移量
scrollTop: 0, //卷起的高度
startIndex: 0, //可視區(qū)域第一條數(shù)據(jù)的索引
endIndex: 0, //可視區(qū)域最后一條數(shù)據(jù)后面那條數(shù)據(jù)的的索引，因?yàn)楹竺嬉胹lice(start,end)方法取需要的數(shù)據(jù)，但是slice規(guī)定end對(duì)應(yīng)數(shù)據(jù)不包含在里面
}
},
/*頁面滾動(dòng)事件*/
onPageScroll(e) {
this.scrollTop = e.scrollTop
this.getShowList()
},
onLoad() {
this.getAllList()
this.getShowList()
},
methods:{
//構(gòu)造2萬條數(shù)據(jù)
getAllList(){
for(let i=0;i<20000;i++){
this.listAll.push(`我是第${i}號(hào)佳麗`)
}
},
//計(jì)算可視區(qū)域數(shù)據(jù)
getShowList(){
this.startIndex = Math.floor(this.scrollTop/this.itemHeight); //可視區(qū)域第一條數(shù)據(jù)的索引
this.endIndex = this.startIndex + this.showNum; //可視區(qū)域最后一條數(shù)據(jù)的后面那條數(shù)據(jù)的索引
this.showList = this.listAll.slice(this.startIndex, this.endIndex) //可視區(qū)域顯示的數(shù)據(jù)，即最后要渲染的數(shù)據(jù)。實(shí)際的數(shù)據(jù)索引是從this.startIndex到this.endIndex-1
this.top = this.scrollTop - (this.scrollTop % this.itemHeight); //在這需要獲得一個(gè)可以被itemHeight整除的數(shù)來作為item的偏移量，這樣隨機(jī)滑動(dòng)時(shí)第一條數(shù)據(jù)都是完整顯示的
}
}
}
</script>
<style scoped>
.item{
height:105px;
padding: 5px;
color: #666;
box-sizing: border-box;
}
</style>
2. 區(qū)域滾動(dòng)
文章來源：http://www.zghlxwxcb.cn/news/detail-513634.html
可滾動(dòng)視圖區(qū)域 scroll-view 用于區(qū)域滾動(dòng)。需注意在webview渲染的頁面中，區(qū)域滾動(dòng)的性能不及頁面滾動(dòng)。
使用豎向滾動(dòng)時(shí)，需要給 一個(gè)固定高度，通過 css 設(shè)置 height；使用橫向滾動(dòng)時(shí)，需要給添加white-space: nowrap;樣式。文章來源地址http://www.zghlxwxcb.cn/news/detail-513634.html
<template>
<view>
<scroll-view class="scroll-box" scroll-y="true" @scroll="scrollEvent">
<!--可視區(qū)域里所有數(shù)據(jù)的渲染區(qū)域-->
<view :style="{position: 'absolute', top: top + 'px'}">
<!--單條數(shù)據(jù)渲染區(qū)域-->
<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: [], //所有數(shù)據(jù)
showList: [], //可視區(qū)域顯示的數(shù)據(jù)
itemHeight: 105, //每條數(shù)據(jù)所占高度
showNum: 6, //每次加載到可視區(qū)域的數(shù)量，itemHeight X showNum 要可視區(qū)域高度 ，否則頁面滾動(dòng)不了。
top: 0, //偏移量
scrollTop: 0, //卷起的高度
startIndex: 0, //可視區(qū)域第一條數(shù)據(jù)的索引
endIndex: 0, //可視區(qū)域最后一條數(shù)據(jù)后面那條數(shù)據(jù)的的索引，因?yàn)楹竺嬉胹lice(start,end)方法取需要的數(shù)據(jù)，但是slice規(guī)定end對(duì)應(yīng)數(shù)據(jù)不包含在里面
}
},
onLoad() {
this.getAllList()
this.getShowList()
},
methods:{
//構(gòu)造2萬條數(shù)據(jù)
getAllList(){
for(let i=0;i<20000;i++){
this.listAll.push(`我是第${i}號(hào)佳麗`)
}
},
//計(jì)算可視區(qū)域數(shù)據(jù)
getShowList(){
this.startIndex = Math.floor(this.scrollTop/this.itemHeight); //可視區(qū)域第一條數(shù)據(jù)的索引
this.endIndex = this.startIndex + this.showNum; //可視區(qū)域最后一條數(shù)據(jù)的后面那條數(shù)據(jù)的索引
this.showList = this.listAll.slice(this.startIndex, this.endIndex) //可視區(qū)域顯示的數(shù)據(jù)，即最后要渲染的數(shù)據(jù)。實(shí)際的數(shù)據(jù)索引是從this.startIndex到this.endIndex-1
this.top = this.scrollTop - (this.scrollTop % this.itemHeight); //在這需要獲得一個(gè)可以被itemHeight整除的數(shù)來作為item的偏移量，這樣隨機(jī)滑動(dòng)時(shí)第一條數(shù)據(jù)都是完整顯示的
},
//區(qū)域滾動(dòng)事件
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>
到了這里，關(guān)于uniapp 開發(fā)小程序虛擬長(zhǎng)列表萬條數(shù)據(jù)不卡頓的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
