在element-ui的select下拉框加上滾動(dòng)加載
在項(xiàng)目中,我們需要運(yùn)用到很多來(lái)自后端返回的數(shù)據(jù)。有時(shí)是上百條,有時(shí)甚至上千條。如果加上后端的多表查詢(xún)或者數(shù)據(jù)量過(guò)大,這就導(dǎo)致在前端的顯示就會(huì)及其慢,特別是在網(wǎng)絡(luò)不好的時(shí)候更是如此。
自然,后端就做了一項(xiàng)非常“漂亮”的交互體驗(yàn)數(shù)據(jù)——分頁(yè)
這不分頁(yè)還好,一分頁(yè)對(duì)超過(guò)10條數(shù)據(jù)之后的本來(lái)也不多,就20條,偏偏還得做個(gè)分頁(yè)器。(假設(shè)為10條)
此時(shí),如果能夠像購(gòu)物商城那樣拖拽到底部自動(dòng)加載新數(shù)據(jù)就好了。
于是《在element-ui的select下拉框加上滾動(dòng)加載》誕生了。
這里通過(guò)自定義封裝vue指令進(jìn)行封裝。(什么是指令:官方指令叫v-on,v-model)
以下以element-ui中的select為例:
在main.js同級(jí)別文件中添加directives.js:
// directives.js import Vue from 'vue' Vue.directive('loadmore', { bind (el, binding) { // 獲取element-ui定義好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight if (CONDITION) { binding.value() } }) } })
- v-loadmore: 用于在element-ui的select下拉框加上滾動(dòng)到底事件監(jiān)聽(tīng)
- scrollHeight 獲取元素內(nèi)容高度(只讀)
- scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒(méi)有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
- clientHeight 讀取元素的可見(jiàn)高度(只讀)
如果元素滾動(dòng)到底, 下面等式返回true, 沒(méi)有則返回false
scrollHeight - scrollTop === clientHeight
這里運(yùn)用到了滾動(dòng)偏移來(lái)做監(jiān)聽(tīng)來(lái)處理,這與聊天對(duì)話框中默認(rèn)下拉到底部的原理是大同小異的,后續(xù)我會(huì)有專(zhuān)門(mén)的文章進(jìn)行講解。
// main.js // 注冊(cè)滾動(dòng)條加載觸發(fā)事件v-loadmore綁定 import directives from './directives' Vue.use(directives)
然后在組件中使用
<!-- vue --> <el-select v-model="chatmode" placeholder="聊天模式" size="mini" v-loadmore="loadMore"> <el-option v-for="item in chatmodes" :key="item.value" :label="item.qa_name" :value="item.qa_code" :disabled="item.disabled"> </el-option> </el-select> <script> export default { methods: { loadMore () { // 這里寫(xiě)入要觸發(fā)的方法 } } } </script>
總結(jié)
以上所述是小編給大家介紹的在element-ui的select下拉框加上滾動(dòng)加載,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 如何解決element-ui中select下拉框popper超出彈框問(wèn)題
- element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式
- 去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn)
- 基于element-ui中el-select下拉框選項(xiàng)過(guò)多的優(yōu)化方案
- 關(guān)于element-ui?select?下拉框位置錯(cuò)亂問(wèn)題解決
- element-ui+vue-treeselect下拉框的校驗(yàn)過(guò)程
- 解決element-ui的下拉框有值卻無(wú)法選中的情況
- Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
- 使用Vant完成DatetimePicker 日期的選擇器操作
- 如何修改element-ui日期下拉框datetimePicker的背景色樣式
相關(guān)文章
JavaScript實(shí)現(xiàn)控制并發(fā)請(qǐng)求的方法詳解
這篇文章主要為大家詳細(xì)介紹了如果有100個(gè)請(qǐng)求,那么如何使用JavaScript實(shí)現(xiàn)控制并發(fā)請(qǐng)求,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一2024-03-03js實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算的方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車(chē)的計(jì)算方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了ajaxfileupload.js實(shí)現(xiàn)上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04js實(shí)現(xiàn)在頁(yè)面上彈出蒙板技巧簡(jiǎn)單實(shí)用
蒙板是兩個(gè)div,其中popWindow樣式的div用于遮住整個(gè)頁(yè)面并半透明,感興趣的朋友可以參考下哈,希望對(duì)你學(xué)習(xí)js蒙版有所幫助2013-04-04函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料,需要的朋友可以參考下。2015-08-08基于JavaScript將表單序列化類(lèi)型的數(shù)據(jù)轉(zhuǎn)化成對(duì)象的處理(允許對(duì)象中包含對(duì)象)
這篇文章主要介紹了基于JavaScript將表單序列化類(lèi)型的數(shù)據(jù)轉(zhuǎn)化成對(duì)象的處理(允許對(duì)象中包含對(duì)象) 的相關(guān)資料,需要的朋友可以參考下2015-12-12