在項目中，我們需要運用到很多來自后端返回的數據。有時是上百條，有時甚至上千條。如果加上后端的多表查詢或者數據量過大，這就導致在前端的顯示就會及其慢，特別是在網絡不好的時候更是如此。

自然，后端就做了一項非常“漂亮”的交互體驗數據——分頁

這不分頁還好，一分頁對超過10條數據之后的本來也不多，就20條，偏偏還得做個分頁器。（假設為10條）

此時，如果能夠像購物商城那樣拖拽到底部自動加載新數據就好了。

于是《在element-ui的select下拉框加上滾動加載》誕生了。

這里通過自定義封裝vue指令進行封裝。（什么是指令：官方指令叫v-on,v-model）

以下以element-ui中的select為例：

 在main.js同級別文件中添加directives.js:

// directives.jsimport 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()   }  }) }})

如果元素滾動到底, 下面等式返回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>

總結

以上所述是小編給大家介紹的在element-ui的select下拉框加上滾動加載,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！