vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
更新時間：2022年04月23日 11:50:50 作者：沈胖三
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
監(jiān)聽頁面滾動到某個高度觸發(fā)事件
methods: {
? ?showIcon() {
? ? ? if (
? ? ? ? !!document.documentElement.scrollTop &&
? ? ? ? document.documentElement.scrollTop > 200
? ? ? ?) { ? ? ? ? ? ?
? ? ? ? ? ? 頁面高度大于200執(zhí)行操作
? ? ? ? } else {
? ? ? ? ? ? ?頁面高度小于200執(zhí)行操作
? ? ? ? }
? ? },
}監(jiān)聽事件
mounted() {
? ? window.addEventListener("scroll", this.showIcon);
},動態(tài)監(jiān)聽頁面滾動高度
//獲取頁面滾動高度
methods:{
? ? ? scrollHandle(e){
? ? ? let top = e.srcElement.scrollingElement.scrollTop; ? ?// 獲取頁面滾動高度
? ? ? console.log(top);
? ? ? ? }
}mounted(){
? ? ? ? ? window.addEventListener('scroll',this.scrollHandle);//綁定頁面滾動事件
? ? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問題的相關(guān)資料,需要的朋友可以參考下2017-10-10
vue不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性,不過可以使用Vue.set()方法將響應(yīng)式屬性添加到嵌套的對象上,下面這篇文章主要給大家介紹了關(guān)于vue中Vue.set()的使用以及對其進行深入解析的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關(guān)資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了vue自定義開發(fā)滑動圖片驗證組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue清除地址欄路由參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于vue中v-model失效原因以及解決方案的相關(guān)資料,vue的v-model是一個雙向綁定的數(shù)據(jù)流,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
vue3與webpack5安裝element-plus樣式webpack編譯報錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報錯,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04