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

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

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

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

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

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

以下以element-ui中的select

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

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