vue/ref&onscroll(返回顶部以及进度条预览)

ref&onscroll

ref官方解释：被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件
使用方法：
	通过$refs去获取被注册元素或组件实例/示例：this.$refs.绑定属性.元素属性方法
	！使用注意：
		ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定

通过ref获取子组件的方法/这里是注册到组件上的操作

1. 注册引用
	
		

			
			
		
2. 创建子组件，添加事件
	
		

			向老大哥问好
		
	
		say_hello(val){
			val == undefined ? this.say = '大哥好' : this.say = val
			log(`来自${val == undefined ? '小老弟' : '老大哥'}的问候：${this.say}`)
		}
3. 父组件中使用子组件的方法
	
		get_item(){
			let cont = '好！很有精神'
			this.$refs.refItems.say_hello(cont)
		}

结果展示

注：不仅仅只能获取子组件的事件，data中的数据也是可以获取的

onscroll
	vue中提供的一种监听滚动元素的一个事件。
使用方法：
	在元素中绑定事件@scroll,在methods中使用。事件名(e){},这个事件会传递一个事件参数

vue中页面的滚动监听和元素高度获取

获取全局高度

	log("页面全文高",document.body.scrollHeight)
	log('页面可见高',document.body.offsetHeight)
	log('页面可见区域高',document.body.clientHeight)
	log('页面当前高',document.documentElement.scrollTop)
	log('页面分辨率高',window.screen.height)
	log('页面工作区高',window.screen.availHeight)

结果

此处参考地址

使用ref获取元素高度

	
 
	log(this.$refs.box.scrollHeight)//对元素的信息获取并打印

结果

	
	#box{
	  width: 100%;
	  height: 5000px;
	  overflow-y: auto; 
	}

注：$refs可以获取DOM元素的方法

例如：

	
		
			

				
			
		
			this.$refs.box.childNodes[0].value = '改变它' 

效果图/之前

效果图/之后

那么获取到元素或页面的高度能干啥呢？

1. 返回顶部
2. 阅览进度条
3. 锚点跳转（此篇未写）
4. ...

返回顶部(先使用事件监听实现)

1. 首先有个按钮

	
		返回
顶部
	
		data() {
			return {
				go_top:{
					display:'none'
				}
			}
		},
	
		.go_top {
			position: fixed;
			bottom: 3%;
			right: 3%;
			width: 50px;
			height: 50px;
			border: 1px solid #CCCCCC;
			border-radius: 50%;
			color: #565656;
		}

2. 滚动显隐

	
	
		window.addEventListener('scroll', this.body_scroll)
	// 获取页面当前高度(兼容) //记得在组件销毁的时候移除监听以防无谓的监听事件
	
		let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	//当前高度大于1000，显示按钮，否则隐藏按钮
		scrollTop >= 1000 ? this.go_top.display = 'block' : this.go_top.display = 'none'
	
	destroyed() {
		window.removeEventListener('scroll', this.body_scroll)
	}

3. 点击返回

	
	
		返回
顶部
	
		go_tops() {
			//直接返回
			document.documentElement.scrollTop = 0
			// 获取页面当前高度(兼容)
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			const timer = setInterval(() => { //使用定时器设置没n毫秒返回n距离
				document.body.scrollTop = document.documentElement.scrollTop = scrollTop -= 50
				if(scrollTop <= 0){ //小于0清除定时器
					console.log(scrollTop);
					clearInterval(timer)
				}
			},10)
		},

至此，返回顶部的功能算是完成了，不过之前使用的是原生的事件监听，对于页面的滚动监听vue中也是提供了监听元素滚动的方法,

	
	
	
	u_scroll(e) {
		// log(e.srcElement.scrollTop)
		let table_src = e.srcElement.scrollTop
		e.srcElement.scrollTop >= 1000 ? this.go_top.display = 'block' : this.go_top.display = 'none'
	},
	
	let tabs_hei = this.$refs.tabs.scrollTop
	const timer = setInterval(() => {
		this.$refs.tabs.scrollTop -= (tabs_hei / 30)
		if (this.$refs.tabs.scrollTop <= 0) {
			clearInterval(timer)
		}
	}, 1)

当我们浏览文档的时候，会发现有些文档有进度条的显示，算是一个小功能，利用vue中的scroll也可以很简洁的完成

	
		

			

				
			
		
	
		progress_bar:{//阅览进度条
			width:'0%',
			height:'2px',
			backgroundColor:'gold'
		}
	
		let line_val = init_table <= 0 ? "0%" : (table_src / init_table * 100).toFixed(5) + '%';
		log("进度条",line_val);
		this.progress_bar.width = line_val

最后贴上所有代码

最后贴张效果图

PS:这里面有个问题,就是元素的高度如果使用80vh的话获取的高度就会因为窗口高度或者电脑的屏幕高度改变而受影响,那么计算出来的百分比值就不一致了,虽然使用了固定高度可以解决,但是又不兼容不同高度.
所以如果有什么好的解决办法的大佬们,希望可以告知在下,多谢了!/抱拳