快捷導(dǎo)航

vue指令做滾動(dòng)加載和監(jiān)聽等

更新時(shí)間：2019年05月26日 09:19:03 作者：奇蒙尼

這篇文章主要介紹了vue指令做滾動(dòng)加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

突然有個(gè)人問起vue如何做滾動(dòng)監(jiān)聽?

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

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

directives.js

// v-loadmore: 用于在element-ui的select下拉框加上滾動(dòng)到底事件監(jiān)聽
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 獲取元素內(nèi)容高度(只讀)
      * scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
      * clientHeight 讀取元素的可見高度(只讀)
      * 如果元素滾動(dòng)到底, 下面等式返回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() {
  // 這里可以做你想做的任何事 到底執(zhí)行
},

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的示例代碼
vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件,然后在銷毀前解綁滾動(dòng)事件,本文通過實(shí)例代碼介紹vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧
2023-10-10
關(guān)于Vue代碼可讀性的幾點(diǎn)建議
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點(diǎn)，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時(shí)應(yīng)注意的一些問題，希望能幫助到大家
2021-09-09
vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)步驟(純js)
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)的相關(guān)資料,在vue項(xiàng)目中實(shí)現(xiàn)點(diǎn)擊圖片放大功能相信對(duì)大家來說都不陌生,文中給出了詳細(xì)的js示例代碼,需要的朋友可以參考下
2023-07-07
vue cli3中eslint報(bào)錯(cuò)no-undef和eslint規(guī)則配置方式
這篇文章主要介紹了vue cli3中eslint報(bào)錯(cuò)no-undef和eslint規(guī)則配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue bus全局事件中心簡單Demo詳解
ue-bus 提供了一個(gè)全局事件中心，并將其注入每一個(gè)組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧
2018-02-02
Vue安裝瀏覽器開發(fā)工具的步驟詳解
這篇文章主要介紹了Vue安裝瀏覽器開發(fā)工具步驟詳解，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
簡單了解前端漸進(jìn)式框架VUE
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下
2020-07-07
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-08-08
如何使用Webstorm和Chrome來調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用Webstorm和Chrome來調(diào)試Vue項(xiàng)目，對(duì)Vue感興趣的同學(xué)，一定要看一下
2021-05-05
Vue 列表渲染 key的原理和作用詳解
這篇文章主要介紹了key在Vue列表渲染時(shí)的原理和作用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-10-10