vue指令做滾動載入 監聽等

奇蒙尼發表於2018-05-22
Vue

突然有個人問起vue如何做滾動監聽?

既然你誠心誠意的發問了, 我就大發慈悲的告訴你.(武藏 & 小次郎)

指令可以很好的做這件事情, 下面以element-select舉例:
directives.js

// v-loadmore: 用於在element-ui的select下拉框加上滾動到底事件監聽
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() {

          /*
           * scrollHeight 獲取元素內容高度(只讀)
           * scrollTop 獲取或者設定元素的偏移值,常用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值預設為0.
           * clientHeight 讀取元素的可見高度(只讀)
           * 如果元素滾動到底, 下面等式返回true, 沒有則返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          
          if(CONDITION) {
              binding.value();
          }
      });
    }
})

元件中:

<template>
    <el-select 
        v-model="selectValue" 
        v-loadmore="loadMore">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.accountName"
            :value="item.id">
        </el-option>
    </el-select>
</template>

// methods
loadMore() {
    // 這裡可以做你想做的任何事 到底執行
},

相關文章