vue虛擬化列表封裝的實現(xiàn)
更新時間：2022年06月06日 09:21:46 作者：郭俊強
這篇文章主要介紹了vue實現(xiàn)虛擬化列表封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue虛擬化列表封裝
將下面代碼復(fù)制一份到自己的項目中
<template>
<div class="scrollParent" ref="scrollContent" @scroll="handleScroll">
<div :style="blankFillStyle">
<div v-for="item,index in showDataList" :key="index">
<slot :everyVirtual="item"></slot>
</div>
</div>
</div>
</template><script>
export default {
? ? props:["oneHeight","virtualList"],
? ? data () {
? ? ? ? return {
? ? ? ? ? ? contentSize:"", //可視區(qū)域可以展示多少條數(shù)據(jù)
? ? ? ? ? ? startIndex:0, //記錄當前滾動的第一個元素的索引
? ? ? ? ? ? currentScroll:0, ?//記錄當前滾動的距離
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? // 獲取可視區(qū)域可以展示多少條
? ? ? ? getContentSize(){
? ? ? ? ? ? // 兩次取反可以獲取到整數(shù)部分
? ? ? ? ? ? this.contentSize = ~~(this.$refs.scrollContent.offsetHeight / this.oneHeight) + 2;
? ? ? ? },
? ? ? ? // 監(jiān)聽滾動條
? ? ? ? handleScroll(){
? ? ? ? ? ? // 持續(xù)滾動 ?減少變量重新賦值 ?優(yōu)化處理 只有在到下一個元素節(jié)點的時候才會重新給this.statrIndex賦值 ?避免和this.startIndex相關(guān)聯(lián)的數(shù)據(jù)再次計算
? ? ? ? ? ? this.currentScroll = this.$refs.scrollContent.scrollTop;
? ? ? ? ? ? let currentIndex = ~~(this.$refs.scrollContent.scrollTop/this.oneHeight);
? ? ? ? ? ? if(this.startIndex == currentIndex){
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? this.startIndex = currentIndex;
? ? ? ? ? ? if((this.startIndex + this.contentSize - 1)>this.virtualList.length-1){ //說明到達底部了
? ? ? ? ? ? ? ? this.$emit("scrollEnd")
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? activated(){
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ? this.$refs.scrollContent.scrollTop = this.currentScroll;
? ? ? ? })
? ? },
? ? computed:{
? ? ? ? endIndex(){ //獲取最后一個元素的索引
? ? ? ? ? ? let endIndex = this.startIndex + this.contentSize*2;
? ? ? ? ? ? if(endIndex>this.virtualList.length-1){
? ? ? ? ? ? ? ? endIndex = this.virtualList.length-1
? ? ? ? ? ? }
? ? ? ? ? ? return endIndex;
? ? ? ? },
? ? ? ? showDataList(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return this.virtualList.slice(startIndex,this.endIndex);
? ? ? ? },
? ? ? ? blankFillStyle(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? paddingTop:startIndex * this.oneHeight + "px",
? ? ? ? ? ? ? ? paddingBottom:(this.virtualList.length - this.endIndex) * this.oneHeight +"px"
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? window.onresize = this.getContentSize();
? ? ? ? window.orientationchange = this.getContentSize();
? ? }
}
</script><style scoped>
? ? .scrollParent{
? ? ? ? height: 100%;
? ? ? ? width: 100%;
? ? ? ? overflow-y: auto;
? ? }
</style>vue虛擬列表-vue-virtual-scroll-list
使用場景
因為公司做了類似于百度網(wǎng)盤的競品，所以用戶如果上傳了很多的文件，就會造成頁面DOM元素的過多，然后因為需要操作DOM元素，所以頁面會變得很卡。所以用虛擬列表來解決。
安裝
安裝的話這個插件有2個版本的，一個是1版本，目前更新到2版本了，二版本功能更加的強大。這里使用了1版本，通俗易懂一點。
npm install --save vue-virtual-scroll-list@1.1.3
使用
在單頁面中導(dǎo)入
import VirtualList from "vue-virtual-scroll-list";
components: {
VirtualList,//注冊組件
}, <div class="content-timeview_box">
<!-- size代表行高 remain代表一次渲染的數(shù)量 -->
<!-- 出現(xiàn)的問題：1.在時間視圖時（文件夾視圖只有一個VirtualList不受影響） 一個日期代表一個VirtualList 怎么解決高度問題？ -->
<!-- 如果統(tǒng)一高度？一個日期中的文件數(shù)量少于高度 就會出現(xiàn)VirtualList之間的空白問題 -->
<!-- 應(yīng)該根據(jù)日期下的文件數(shù)量來動態(tài)的綁定每一個VirtualList的高度 -->
<VirtualList
:size="40"
:remain="17"
:wclass="vuesrollboxviewClass"
:tobottom="toBottom"
style="padding: 0 32px 0 32px"
:style="{height:itembig.items.length>6?scrollbarheight:'200px'}"
>toBottom的方法，這個地方就很坑，因為我只能在1.1.3版本中觸發(fā)這個方法，1版本的其他版本號我沒有觸發(fā)成功，應(yīng)該還是高度的問題。toBottom：滾動到底部時觸發(fā)，請求下一組數(shù)據(jù)
//滾到底部時觸發(fā)
//注：此方法在1.0高版本不兼容，只能在官方文檔1.1.3版本中使用
//@1.1.3
toBottom() {
this.infiniteHandler();
},:wclass=“vuesrollboxviewClass”
wclass是自定義的class，我這里的業(yè)務(wù)場景不是每行只有1個數(shù)據(jù)，從上而下排列下來，而是每行根據(jù)分辨率不同，展示5個或6個，所以得計算好一次渲染的個數(shù)，需要動態(tài)的綁定。
小結(jié)：還是需要更熟練的掌握原生JS，雖然有各種各樣的框架插件來解決問題，但是碰到業(yè)務(wù)場景更復(fù)雜的時候呢？所以還是要掌握原生JS，具備自己寫輪子的能力才行。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中利用prop進行父子通信時的注意事項,文中通過實例介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化的相關(guān)資料,在Vue中你可以使用watch或者computed來監(jiān)聽對象或數(shù)組某個屬性的變化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果
這篇文章主要為大家詳細介紹了vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
如何使用?vxe-table?將行數(shù)據(jù)標記為刪除狀態(tài)
vxe-table支持將數(shù)據(jù)標記為待刪除狀態(tài),通過調(diào)用setPendingRow方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-01-01
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實現(xiàn)嗎，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當涉及到非父子關(guān)系的組件通信時,傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過具體的代碼示例來幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下2024-09-09
vue中使用echarts以及簡單關(guān)系圖的點擊事件方式
這篇文章主要介紹了vue中使用echarts以及簡單關(guān)系圖的點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁的示例代碼,本文通過定義defaultDialog .vue,結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
vue3中v-for報錯'item'is?of?type'unknown'的
在寫vue3+ts的項目,得到一個數(shù)組,需要循環(huán)展示,使用v-for循環(huán),寫完之后發(fā)現(xiàn)有個報錯,接下來通過本文給大家介紹vue3中v-for報錯?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11