最近在做一個微信小程式的直播模組，模組裡的聊天室功能是用scroll -view 一維數(shù)組的形式展示的，而且也沒有進行任何的優(yōu)化，導(dǎo)致用戶的體驗感比較差

##首先模擬一下優(yōu)化前的

聊天室情況

肉眼可見的蛋痛~

但是優(yōu)化還是得優(yōu)化滴，不優(yōu)化是不可能滴，但是在開始之前，我覺得有必要把最佳化步驟拆分為以下兩點?

1.不再使用scroll-into-view設(shè)定錨點

由於舊版使用的是

scroll-view 一維數(shù)組的形式實現(xiàn)的，這就導(dǎo)致在資料新增後頁面總是會顯示載入後的最後一個資訊，而不是載入前的最後一則資訊，因此上一任開發(fā)者使用了scroll-into-view屬性作為資料載入後的回位錨點，但是由於錨點指向的切換和資料載入並不是同步發(fā)生的，這就導(dǎo)致出現(xiàn)回彈的現(xiàn)象

2. 大量資料的處理

因為是

聊天室功能，因此不可避免的需要載入大量的使用者對話、圖片等內(nèi)容，又因為scroll-view本身並不適合載入大量的資料（太菜了想不出來其他辦法），故而需要在資料的載入和顯示部分下點功夫處理一下

#3. 附加功能處理

聊天室原本還有

返回底部等功能存在，因此在完成優(yōu)化後原本的功能也不能忽略

OK開工~

1、倒置scroll-view

為什麼要倒置

scroll-view呢？從上面的第一點我們可以看出，如果需要正序地插入數(shù)據(jù)，那麼就會不可避免地出現(xiàn)數(shù)據(jù)加載後無法顯示後面數(shù)據(jù)的情況，但是想要解決這種情況又需要使用scroll-into-view屬性，那麼如果需要徹底地解決這個問題，就需要從問題的根源scroll-view下手

首先是

修改前的程式碼?

<view>這是一個直播畫面</view>
??<scroll-view>
????<view>
??????{{?item.data?}}
????</view>
??</scroll-view>

const?scrollIntoView?=?ref("index1");
const?upper?=?()?=>?{
??let?lastNum?=?scrollData.value[0].data;
??let?newArr?=?[];
??for?(let?index?=?1;?index??{
????scrollIntoView.value?=?`index${lastNum}`;
????console.log("scrollIntoView??:>>",?scrollIntoView.value);
??},?100);
};
const?getRandomColor?=?()?=>?{
??return?"#"?+?Math.random().toString(16).substr(2,?6);
};

那麼就先來試試看

倒置scroll-view到底也沒有效果

首先我們需要給

scroll -view套上一個transform:rotate(180deg)的屬性，然後再給內(nèi)部的子元素也套上同樣的屬性，別忘了給存放資料的陣列也倒置一下，最重要的，把scroll-view上的scroll-into-view屬性去掉，就會得到這樣的效果?

還有就是此時

捲軸的位置是在左邊的，如果有需要可以使用CSS屬性去掉，或者自行模擬，下面是去移除捲軸的CSS樣式?

::-webkit-scrollbar?{
??display:none;
??width:0;
??height:0;
??color:transparent;
}

到這裡還只是

第一步，下一步是如何下拉載入資料。

此時我們的

scroll-view是處於倒置的狀態(tài)，也就是說頂部是底，底部才是頂(擱著繞口令呢)，所以之前使用的scrolltoupper觸頂方法要替換成scrolltolower觸底方法才能實現(xiàn)“下拉加載”

下面是目前的

聊天室看起來好多了

2、大量數(shù)據(jù)的處理

處理完回彈問題后，就需要考慮如何處理大量數(shù)據(jù)。由于uni-app官方也在文檔中提到scroll-view加載大批量數(shù)據(jù)的時候性能較差，但無奈手頭上也沒有別的辦法，只能死馬當(dāng)活馬醫(yī)了

我第一個想法就是非常經(jīng)典的虛擬列表，但是此前所看的很多關(guān)于虛擬列表的文章都是在web端實現(xiàn)的，似乎小程序領(lǐng)域里并不是一個被經(jīng)常采用的方法，但是所幸還是找到了如何在微信小程序?qū)崿F(xiàn)虛擬列表的資料，詳情可以查看這篇文章?微信小程序虛擬列表

OK說干就干，那么第一步就是要明確實現(xiàn)虛擬列表需要什么樣的數(shù)據(jù)結(jié)構(gòu)，虛擬列表其實簡單地說就是當(dāng)某一個模塊的數(shù)據(jù)超出了可視范圍就將其隱藏，那么如何將數(shù)據(jù)分為多個模塊呢？答案就是二維數(shù)組

首先將當(dāng)前的頁碼存儲起來（默認為0），當(dāng)觸發(fā)下拉加載動作時頁碼+1，然后以當(dāng)前頁碼作為下標(biāo)存入數(shù)組

const?currentShowPage=ref(0)
const?upper?=?()?=>?{
??let?len?=?scrollData.value[currentShowPage.value].length?-?1;
??let?lastNum?=?scrollData.value[currentShowPage.value][len].data;
??let?newArr?=?[];
??currentShowPage.value?+=?1;
??for?(let?index?=?1;?index?<p>當(dāng)然別忘了在頁面中也需要以<code>二維數(shù)組</code>的形式循環(huán)數(shù)據(jù)</p><pre class="brush:php;toolbar:false"><scroll-view>
????<view>
??????<view>
????????{{?item.data?}}
??????</view>
????</view>
??</scroll-view>

數(shù)據(jù)結(jié)構(gòu)的問題解決了，那么接下來就是如何判斷數(shù)據(jù)模塊是否超出可視范圍。

首先我們需要知道每個數(shù)據(jù)模塊的高度，其實很簡單，只需要為每個模塊定義一個id，然后在數(shù)據(jù)展示之后根據(jù)id獲取到該模塊的節(jié)點信息然后按順序存儲到數(shù)組中即可

const?pagesHeight?=?[]
onReady(()=>{
????setPageHeight()
})

const?upper?=?()?=>?{
??...
??nextTick(()?=>?{
????//?每次獲取新數(shù)據(jù)都調(diào)用一下
????setPageHeight();
??});
};

const?setPageHeight?=?()?=>?{
??let?query?=?uni.createSelectorQuery();
??query
????.select(`#item-${currentShowPage.value}`)
????.boundingClientRect(res?=>?{
??????pagesHeight[currentShowPage.value]?=?res?&&?res.height;
????})
????.exec();
};

OK，現(xiàn)在我們已經(jīng)知道每個模塊的高度了，然后就是監(jiān)聽模塊與可視窗口的交叉范圍。這里有兩種方法，一種是JS獲取可視窗口的高度與模塊scrollTop進行差值計算，另一種是使用小程序的createIntersectionObserver方法讓程序自行監(jiān)聽交叉區(qū)域

這里我展示的是第二種方法，如果對第一種方法感興趣的朋友可以向上看第二章開頭我推薦的《微信小程序虛擬列表》文章

關(guān)于createIntersectionObserver方法的使用其實很簡單，我們只需要把可視窗口的id以及需要監(jiān)聽的模塊id傳入即可，詳情看官方文檔

onReady(()?=>?{
??...
??observer(currentShowPage.value);
});
const?upper?=?()?=>?{
??...
??nextTick(()?=>?{
????//?每次獲取新數(shù)據(jù)都調(diào)用一下
????observer();
??});
};

//?允許渲染的數(shù)組下標(biāo)，需要設(shè)置默認值
const?visiblePagesList?=?ref([-1,0,1])
const?observer?=?pageNum?=>?{
??const?observeView?=?wx
????.createIntersectionObserver()
????.relativeTo("#scroll",?{?top:?0,?bottom:?0?});
??observeView.observe(`#item-${pageNum}`,?res?=>?{
????if?(res.intersectionRatio?>?0)?visiblePagesList.value?=?[pageNum?-?1,?pageNum,?pageNum?+?1];
??});
};

最后就是在頁面中判斷該模塊是否允許被渲染（也就是是否存儲在visiblePagesList數(shù)組中），這里就很簡單了，只需要寫一個方法在頁面中調(diào)用即可

<scroll-view>
????<view>
??????<template>
????????<view>
??????????{{?item.data?}}
????????</view>
??????</template>
??????<view></view>
????</view>
??</scroll-view>

const?includePage?=?index?=>?{
??return?visiblePagesList.value.indexOf(index)?>?-1;
};

來看看效果如何

額...似乎沒有太大區(qū)別，那我們看看頁面結(jié)構(gòu)到底也沒有將可視區(qū)域外的內(nèi)容切換為空白view

成功！

3、功能調(diào)整

聊天室原本還有回底功能等，也不能忘了加上

這個部分就比較簡單了，只需要直接使用scroll-view的scroll-top屬性，然后通過在scroll回調(diào)中動態(tài)記載scroll-top的值即可

下面是部分代碼

<scroll-view>
??...
??</scroll-view>
??<view>回底</view>

let?scrollTop;
const?currentTop?=?ref(0);
const?showGoBottom?=?ref(false);
const?handle_scroll?=?throttle(event?=>?{
??scrollTop?=?event[0].detail.scrollTop;
??if?(scrollTop?>?300)?{
????showGoBottom.value?=?true;
??}
},?100);
const?handle_goBottom?=?()?=>?{
??currentTop.value?=?scrollTop;
??nextTick(()?=>?{
????currentTop.value?=?0;
??});
??showGoBottom.value?=?false;
};

大功告成~

最后附上demo倉庫

https://gitee.com/huang-qihao123/virtual-list-demo

推薦：《uniapp教程》

以上是聊聊uniapp的scroll-view下拉加載的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！