在項(xiàng)目中撒璧，我們需要運(yùn)用到很多來(lái)自后端返回的數(shù)據(jù)寒波。有時(shí)是上百條，有時(shí)甚至上千條。如果加上后端的多表查詢或者數(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'
let MyPlugin = {}
export default MyPlugin.install = function(vue, options) {
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ì)有專門(mén)的文章進(jìn)行講解凡资。
然后在組件中使用
<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>
