第微信小程序虛擬列表的實現(xiàn)示例viewwx:for="{{list}}"wx:for-index="pageNum"id="item{{pageNum}}"

viewwx:for="{{item}}"

textclass=""{{item.idx}}/text

/view

/view

onLoad:function(options){

this.index=0;

this.currentIndex=0;//當(dāng)前頁數(shù)pageNum

this.pageHeight=[];//每屏高度存儲

this.allList=[];//獲取到的所有數(shù)據(jù)

this.systemHeight=0;//屏幕高度

constarr=[

idx:this.index++

idx:this.index++

idx:this.index++

idx:this.index++

idx:this.index++

this.setData({[`list[${this.currentIndex}>:arr},()={

this.setPageHeight();

this.getSystemInfo();

給每一屏的view動態(tài)的設(shè)置id名字，方便在渲染時獲取每屏高度，并進行存儲，為后續(xù)不在可視區(qū)域占位設(shè)置高度使用

循環(huán)pageHeight，相加每個分頁高度和當(dāng)前滾動距離進行比較,獲取到當(dāng)前渲染的pageNum，然后把當(dāng)前選渲染的pageNum-+1，上一屏幕和下一屏幕放入數(shù)組中，當(dāng)前三個分頁數(shù)據(jù)展示，其他屏幕的數(shù)據(jù)進行view占位，高度為存儲高度。

//滾動距離計算

onPageScroll:throttle(function(e){

letpageScrollTop=e[0].scrollTop;

letthat=this;

//滾動計算現(xiàn)在處于那一個分頁的屏

letscrollTop=0;

letcurrentIndex=this.currentIndex;

for(vari=0;ithis.pageHeight.length;i++){

scrollTop=scrollTop+this.pageHeight[i];

if(scrollToppageScrollTop+this.systemHeight-50){

this.currentIndex=i;

this.visualIndex=[i-1,i,i+1];

that.setData({

visualIndex:this.visualIndex

break;

},200)

實時監(jiān)控滾動，做節(jié)流優(yōu)化處理

constthrottle=(fn,interval)={

varenterTime=0;//觸發(fā)的時間

vargapTime=interval||300;//間隔時間，如果interval不傳值，默認為300ms

returnfunction(){

varthat=this;

varbackTime=newDate();//第一次函數(shù)return即觸發(fā)的時間

if(backTime-enterTimegapTime){

fn.call(that,arguments);

enterTime=backTime;//賦值給第一次觸發(fā)的時間保存第二次觸發(fā)時間

獲取到可視區(qū)域數(shù)組，然后判斷當(dāng)前pageNum是否在visualIndex里，是的話進行渲染，不是的話，view占位，高度獲取存儲高度

wxsmodule='filter'

varincludesList=function(list,currentIndex){

if(list){

returnlist.indexOf(currentIndex)-1

module.exports.includesList=includesList;

/wxs

view

viewwx:for="{{list}}"wx:for-index="pageNum"id="item{{pageNum}}"wx:key="pageNum"

blockwx:if="{{filter.includesList(visualIndex,pageNum)}}"

viewwx:for="{{item}}"

textclass=""{{item.idx}}/text

/view

/block

blockwx:else

view/view

/block

/view

/view

在可視區(qū)域的數(shù)組的pageNum則循環(huán)當(dāng)前數(shù)組，如果不在的話就設(shè)置高度占位，渲染效果如下：

這種方法就大功告成了！

方法二

使用微信小程序api

IntersectionObserver

//視圖監(jiān)聽

observePage:function(pageNum){

constthat=this;

constobserverView=wx.createIntersectionObserver(this).relativeToViewport({top:0,bottom:0});

observerView.observe(`#item${pageNum}`,(res)={

console.log(res,'res');

if(ersectionRatio0){

that.setData({

visualIndex:[pageNum-1,pageNum,pageNum+1]

利用oberserve監(jiān)聽當(dāng)前頁面是否在在可視區(qū)域內(nèi)，是的話將當(dāng)前pageNum-+1，pageNum放入可視區(qū)域數(shù)組visualIn