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