在項目中，我們需要運用到很多來自後端返回的數據。有時是上百條，有時甚至上千條。如果加上後端的多表查詢或者數據量過大，這就導致在前端的顯示就會及其慢，特別是在網路不好的時候更是如此。 自然，後端就做了一項非常“漂亮”的交互體驗數據——分頁 這不分頁還好，一分頁對超過10條數據之後的本來也不多，就20條 ...
在項目中，我們需要運用到很多來自後端返回的數據。有時是上百條，有時甚至上千條。如果加上後端的多表查詢或者數據量過大，這就導致在前端的顯示就會及其慢，特別是在網路不好的時候更是如此。
自然，後端就做了一項非常“漂亮”的交互體驗數據——分頁
這不分頁還好，一分頁對超過10條數據之後的本來也不多，就20條，偏偏還得做個分頁器。（假設為10條）
此時，如果能夠像購物商城那樣拖拽到底部自動載入新數據就好了。
於是《在element-ui的select下拉框加上滾動載入》誕生了。
這裡通過自定義封裝vue指令進行封裝。（什麼是指令：官方指令叫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下拉框加上滾動到底事件監聽
scrollHeight 獲取元素內容高度(只讀)
scrollTop 獲取或者設置元素的偏移值,常用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值預設為0.
clientHeight 讀取元素的可見高度(只讀)
如果元素滾動到底, 下麵等式返回true, 沒有則返回false
scrollHeight - scrollTop === clientHeight
這裡運用到了滾動偏移來做監聽來處理，這與聊天對話框中預設下拉到底部的原理是大同小異的，後續我會有專門的文章進行講解。
// main.js
// 註冊滾動條載入觸發事件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 () {
// 這裡寫入要觸發的方法
}
}
}
</script>本文並非本人思路，但原作者的實現方法值得認同，在基礎上詳細說明使用方法
原文https://segmentfault.com/a/1190000014972548
