vue监听页面

前言

文章仅供参考

例如：项目中我们会遇到要监听页面，然后根据页面不同高度去改变组件之数值。

一、要怎么监听呢？

我们可以使用：

window.addEventListener('scroll', this.handleScroll)

二、使用步骤

1.在data中定义一个scroll

代码如下（示例）：

data(){
    return{
        scroll:"", //页面高度
        percentage :"" //根据高度要修改的值
    }
},

2.在methods写入方法

代码如下（示例）：

methods: {
		//监听页面高度  根据页面高度改变当前页面指定组件的值
		handleScroll() {
			//或者使用document.querySelector('.class或者#id').scrollTop
			this.scroll = document.documentElement.scrollTop || document.body.scrollTop
			// console.log(this.scroll)
			if(this.scroll > 100){
				this.percentage = 30
			}if(this.scroll > 200){
				this.percentage = 50
			}if(this.scroll > 600){
				this.percentage = 70
			}if(this.scroll > 800){
				this.percentage = 80
			}if(this.scroll > 1000){
				this.percentage = 99.9
			}
		},
		//销毁,否则跳到别的路由还是会出现
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll)
		},
	}

3.在mounted调用方法

代码如下（示例）：

 window.addEventListener('scroll',this.handleScroll)

---

总结

以上就是今天要讲的内容，如果有更好到方法也请你在评论区留言交流哈~