資訊專欄INFORMATION COLUMN
摘要：突然有個人問起如何做滾動監聽既然你誠心誠意的發問了我就大發慈悲的告訴你武藏小次郎指令可以很好的做這件事情下面以舉例用于在的下拉框加上滾動到底事件監聽獲取定義好的盒子獲取元素內容高度只讀獲取或者設置元素的偏移值常用于計算滾動條
突然有個人問起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();
}
});
}
})
組件中:
// methods
loadMore() {
// 這里可以做你想做的任何事 到底執行
},
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95177.html
摘要：先來實現局部的滾動加載沒有更多了這是測試的數據這是測試的數據這是測試的數據這是測試的數據這是測試的數據這是測試的數據這里監聽等于觸發獲取數據的方法否則不觸發我是監聽的距離底部的距離判斷當前頁數大于最后一頁加載完畢首次加載頁面 先來實現局部的滾動加載 {{item}} ～沒有更多了～ ...
摘要：插件開發初體驗懶加載前言閑來無事，想自己開發一個簡單的懶加載插件，能力的提升我覺得是可以通過編寫插件實現，研究了一下官網的插件編寫。 Vue插件開發初體驗——（懶加載） 前言 閑來無事，想自己開發一個簡單的Vue懶加載插件，能力的提升我覺得是可以通過編寫插件實現，研究了一下官網的Vue插件編寫。馬上自己獨立開始編寫懶加載插件。 一、寫在前面 由于我在網上看了很多關于vue插件的實例，發...
摘要：天氣預報小程序說了很多小程序開發的基礎準備，下面就結合個人實際練手項目天氣預報小程序簡單說明。物料準備從需求結果導向，天氣程序首先要能獲取到當前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。 前言 學習了一段時間小程序，大致過了兩遍開發文檔，抽空做個自己的天氣預報小程序，全當是練手，在這記錄下。小程序開發的安裝、注冊和接入等流程就不羅列了，在小程序接入指南已經寫得很清楚了，以下...
摘要：前言如今可謂是一匹黑馬數已居第一位前端開發對于的使用已經越來越多，它的優點就不做介紹了本篇是我對使用過程中以及對一些社區朋友提問我的問題中做的一些總結幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節點將被視為靜態內容并跳過。 前言 vue如今可謂是一匹黑馬,github star數已居第一位！前端開發對于vue的使用已經越來越多，它的優點就不做介紹了,本篇是我對vue使用過程中以及...
閱讀 1091·2021-11-15 18:00
閱讀 2803·2021-09-22 15:18
閱讀 1965·2021-09-04 16:45
閱讀 750·2019-08-30 15:55
閱讀 3853·2019-08-30 13:10
閱讀 1332·2019-08-30 11:06
閱讀 1984·2019-08-29 12:51
閱讀 2294·2019-08-26 13:55
