vue指令做滾動加載和監(jiān)聽等
更新時間：2019年05月26日 09:19:03 作者：奇蒙尼
這篇文章主要介紹了vue指令做滾動加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
突然有個人問起vue如何做滾動監(jiān)聽?
既然你誠心誠意的發(fā)問了, 我就大發(fā)慈悲的告訴你.(武藏 & 小次郎)
指令可以很好的做這件事情, 下面以element-select舉例:
directives.js
// v-loadmore: 用于在element-ui的select下拉框加上滾動到底事件監(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è)置元素的偏移值,常用于, 計算滾動條的位置, 當(dāng)一個元素的容器沒有產(chǎn)生垂直方向的滾動條, 那它的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() {
// 這里可以做你想做的任何事 到底執(zhí)行
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中監(jiān)控滾動事件可以直接在mounted中綁定滾動事件,然后在銷毀前解綁滾動事件,本文通過實例代碼介紹vue實現(xiàn)滾動底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧2023-10-10
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時應(yīng)注意的一些問題，希望能幫助到大家2021-09-09
這篇文章主要給大家介紹了關(guān)于vue點擊單張圖片放大實現(xiàn)的相關(guān)資料,在vue項目中實現(xiàn)點擊圖片放大功能相信對大家來說都不陌生,文中給出了詳細的js示例代碼,需要的朋友可以參考下2023-07-07
vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式
這篇文章主要介紹了vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
ue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧2018-02-02
這篇文章主要介紹了Vue安裝瀏覽器開發(fā)工具步驟詳解，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了前端漸進式框架VUE的相關(guān)資料，文中講解的非常細致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07
Vue?Baidu?Map之自定義點圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點的優(yōu)先級問題，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-08-08
如何使用Webstorm和Chrome來調(diào)試Vue項目
這篇文章主要介紹了如何使用Webstorm和Chrome來調(diào)試Vue項目，對Vue感興趣的同學(xué)，一定要看一下2021-05-05
這篇文章主要介紹了key在Vue列表渲染時的原理和作用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10