Vue中滾動事件,實現某元素在頁面可見時出現

2021-10-25 15:18:22 字數 1057 閱讀 8374

我想實現的效果是當頁面滾動到某元素在頁面可見時出現

思路就是監聽頁面滾動事件,滾動到某一位置設定元素可見。

在mounted鉤子中給window新增乙個滾動監聽事件

mounted()

,

在methods中新增handlescroll方法

handlescroll()

handlescroll()

}

先寫兩個樣式

然後將需要被設定的元素的class與exp_class繫結,當exp_class為true時,就應用wrapanimated這個樣式

>

>

:class

="exp_class == true ? 'wrapanimated' : 'wrapanimate'

">

我是需要元素div

>

div>

template

>

>

export

default}}

script

>

也可以使用vue中的v-show指令

>

>

v-show

="exp_class"

>

我是需要元素div

>

div>

template

>

>

export

default}}

script

>

當然v-show指令與display:none效果一樣,是不佔據頁面空間的,而visibility: hidden;還會佔據空間,所以根據自身需求以及使用者體驗來決定使用哪種方法。

destroyed()

,

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距...

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted function 然後在方法中,新增這個handlescroll方法 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距離時,設...

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 控制台列印結果 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於...