關(guān)于el-scrollbar滾動(dòng)條初始化不顯示的問(wèn)題及解決
el-scrollbar滾動(dòng)條初始化不顯示
當(dāng)使用el-scrollbar的時(shí)候，比如你的數(shù)據(jù)列表是后端獲取的，這時(shí)候，初始化的時(shí)候，因?yàn)閿?shù)據(jù)還沒(méi)有獲取到，導(dǎo)致里面的內(nèi)容沒(méi)有撐開(kāi)，所以滾動(dòng)條是不顯示的，但是可以正常滾動(dòng),見(jiàn)下圖
所以解決辦法是在獲取到列表的時(shí)候，調(diào)用一下update方法
查看源碼的時(shí)候，因?yàn)閟crollBar有一個(gè)update方法，所以調(diào)用這個(gè)方法可以解決
<el-scrollBar ref="scrollDiv"></el-scrollBar>
...
// 異步獲取列表之后
this.nextTick(() => {
//解決滾動(dòng)條初始化消失的問(wèn)題
this.$refs.scrollDiv.update()
})
el-scrollbar:Element UI隱藏組件
滾動(dòng)條初始化消失的問(wèn)題
注意事項(xiàng)：
1.el-scrollbar的父層要有固定高度
2.el-scrollbar的高度要設(shè)成100%
3.如果出現(xiàn)橫滾動(dòng)條，添加overflow-x:hidden;
問(wèn)題分析
通過(guò)閱讀源碼，scrollbar組件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 這7個(gè) props屬性
props: {
? ? native: Boolean, ?// 是否使用本地，設(shè)為true則不會(huì)啟用element-ui自定義的滾動(dòng)條
? ? wrapStyle: {}, ?// 包裹層自定義樣式
? ? wrapClass: {}, ?// 包裹層自定義樣式類(lèi)
? ? viewClass: {}, ?// 可滾動(dòng)部分自定義樣式類(lèi)
? ? viewStyle: {}, ?// 可滾動(dòng)部分自定義樣式
? ? noresize: Boolean, // 如果 container 尺寸不會(huì)發(fā)生變化，最好設(shè)置它可以優(yōu)化性能
? ? tag: { ?// 生成的標(biāo)簽類(lèi)型，默認(rèn)使用 `div`標(biāo)簽包裹
? ? ? type: String,
? ? ? default: 'div'
? ? }
}代碼示例
<el-scrollbar ? ? wrap-class="wraplist" ? ? ref="scrollDiv" ? ? wrap-style="overflow-x:hidden;" ? ? view-class="viewclass" ? ? view-style="font-weight: bold;height:100%;" ? ? :native="false" > </el-scrollbar>?
setTimeout(() => {
? ?this.$refs.scrollDiv.update()
?}, 0)以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn)
通常在后臺(tái)管理系統(tǒng)中,需要根據(jù)每個(gè)用戶不同的權(quán)限來(lái)動(dòng)態(tài)展示菜單,本文主要介紹了element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買(mǎi)電影票，很多朋友不知道她的功能是怎么實(shí)現(xiàn)的，作為我程序員一枚對(duì)它的算法很好奇，今天小編就把基于Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺(tái)，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例
在前端開(kāi)發(fā)中,當(dāng)用戶頻繁連續(xù)點(diǎn)擊按鈕,可能會(huì)導(dǎo)致頻繁的請(qǐng)求或者觸發(fā)過(guò)多的操作,本文主要介紹了vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-01-01
快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題
這篇文章主要介紹了快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開(kāi)源庫(kù),它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開(kāi)發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下2024-04-04
vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進(jìn)入頁(yè)面自動(dòng)定位的解決方案,需要的朋友可以參考下2018-04-04
VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問(wèn)題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02