methods: {
? ?showIcon() {
? ? ? if (
? ? ? ? !!document.documentElement.scrollTop &&
? ? ? ? document.documentElement.scrollTop > 200
? ? ? ?) { ? ? ? ? ? ?
? ? ? ? ? ? 頁面高度大于200執(zhí)行操作
? ? ? ? } else {
? ? ? ? ? ? ?頁面高度小于200執(zhí)行操作
? ? ? ? }
? ? },
}

監(jiān)聽事件

mounted() {
? ? window.addEventListener("scroll", this.showIcon);
},

動(dòng)態(tài)監(jiān)聽頁面滾動(dòng)高度

//獲取頁面滾動(dòng)高度
methods:{
? ? ? scrollHandle(e){
? ? ? let top = e.srcElement.scrollingElement.scrollTop; ? ?// 獲取頁面滾動(dòng)高度
? ? ? console.log(top);
? ? ? ? }
}

mounted(){
? ? ? ? ? window.addEventListener('scroll',this.scrollHandle);//綁定頁面滾動(dòng)事件
? ? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue v2.5 調(diào)整和更新不完全問題
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問題的相關(guān)資料,需要的朋友可以參考下
2017-10-10
vue中Vue.set()的使用以及對其進(jìn)行深入解析
vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級響應(yīng)式屬性,不過可以使用Vue.set()方法將響應(yīng)式屬性添加到嵌套的對象上,下面這篇文章主要給大家介紹了關(guān)于vue中Vue.set()的使用以及對其進(jìn)行深入解析的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue3渲染器與編譯器深入淺析
這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
Vue3.0中的monorepo管理模式的實(shí)現(xiàn)
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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ù)中選擇滿足條件的項(xiàng),文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue清除地址欄路由參數(shù)方式
這篇文章主要介紹了vue清除地址欄路由參數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue中v-model失效原因以及解決方案
這篇文章主要給大家介紹了關(guān)于vue中v-model失效原因以及解決方案的相關(guān)資料,vue的v-model是一個(gè)雙向綁定的數(shù)據(jù)流,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue中Axios的封裝與API接口的管理詳解
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-08-08
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04