欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在element-ui的select下拉框加上滾動加載

 更新時間:2019年04月18日 08:44:24   作者:lianjy357  
這篇文章主要介紹了在element-ui的select下拉框加上滾動加載,本文以以element-ui中的select為例,給大家介紹的非常詳細,需要的朋友可以參考下

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

自然,后端就做了一項非?!捌痢钡慕换ンw驗數據——分頁

這不分頁還好,一分頁對超過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下拉框加上滾動到底事件監(jiān)聽
  • scrollHeight 獲取元素內容高度(只讀)
  • scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
  • clientHeight 讀取元素的可見高度(只讀)

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

scrollHeight - scrollTop === clientHeight

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

// 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>

總結

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

相關文章

最新評論