我想實現的效果是當頁面滾動到某元素在頁面可見時出現
思路就是監聽頁面滾動事件,滾動到某一位置設定元素可見。
在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 監聽元素到頂部的距離 並判斷滾動的距離如果大於...