在項(xiàng)目中，我們需要運(yùn)用到很多來自后端返回的數(shù)據(jù)。有時(shí)是上百條，有時(shí)甚至上千條。如果加上后端的多表查詢或者數(shù)據(jù)量過大，這就導(dǎo)致在前端的顯示就會(huì)及其慢，特別是在網(wǎng)絡(luò)不好的時(shí)候更是如此。

自然，后端就做了一項(xiàng)非常“漂亮”的交互體驗(yàn)數(shù)據(jù)——分頁

這不分頁還好，一分頁對(duì)超過10條數(shù)據(jù)之后的本來也不多，就20條，偏偏還得做個(gè)分頁器。（假設(shè)為10條）

此時(shí)，如果能夠像購物商城那樣拖拽到底部自動(dòng)加載新數(shù)據(jù)就好了。

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

這里通過自定義封裝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)聽
• scrollHeight 獲取元素內(nèi)容高度(只讀)
• scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
• clientHeight 讀取元素的可見高度(只讀)

如果元素滾動(dòng)到底, 下面等式返回true, 沒有則返回false

scrollHeight - scrollTop === clientHeight

這里運(yùn)用到了滾動(dòng)偏移來做監(jiān)聽來處理，這與聊天對(duì)話框中默認(rèn)下拉到底部的原理是大同小異的，后續(xù)我會(huì)有專門的文章進(jìn)行講解。

// main.js
// 注冊滾動(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 () {
   // 這里寫入要觸發(fā)的方法
  }
 }
}
</script>

總結(jié)

以上所述是小編給大家介紹的在element-ui的select下拉框加上滾動(dòng)加載,希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評(píng)論