技術標籤：vuejqueryjs

這是一個笨辦法

Vue中滾動事件

我想實現的效果是當頁面滾動到某元素在頁面可見時出現
思路就是監聽頁面滾動事件，滾動到某一位置設定元素可見。

1. 監聽滾動事件

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

mounted() {
	window.addEventListener('scroll', this.handleScroll)
},

在methods中新增handleScroll方法

handleScroll() {
    var clientheight = document.documentElement.clientHeight;
 

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}

2.監聽元素到頂部的距離，並得到頁面的高度，並判斷當頁面高度+頁面滾動的距離大於元素到頂部的距離時設定元素可見

handleScroll() {
    var exp_height = $('.experience').offset().top;
    var clientheight = document.documentElement.clientHeight;
    var
 
 scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if(clientheight+scrollTop > exp_height) {
           this.exp_class = true;
    }
}

先寫兩個樣式

<style>
.wrapanimate {
    visibility: hidden;
}
.wrapanimated {
    visibility: visible;
}
</style>
 

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

<template>
	<div>
		<div :class="exp_class == true ? 'wrapanimated' : 'wrapanimate'">我是需要元素</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				exp_class : false
			}
		}
	}
</script>

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

<template>
	<div>
		<div v-show="exp_class">我是需要元素</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				exp_class : false
			}
		}
	}
</script>

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

3.當離開這個頁面時需要移除這個監聽事件，不然會報錯

destroyed () {
     window.removeEventListener('scroll', this.handleScroll)
},