写Vue回到顶部组件遇到的一些问题

作者 LoaingMore 日期 2017-10-15
写Vue回到顶部组件遇到的一些问题

人的懒惰是有惯性的,写博客也是一旦停下来就会一直懒下去,相反一旦坚持下来,也会有惯性,所以我要开始更文啦…

效果


组件地址

问题

1.谷歌浏览器下document.body.scrollTop失效

经查阅此版本(版本为61)后的均需要使用document.documentElement.scrollTop来替代

2.vue怎么监听滚动事件

<div class="back-top" @click="goTop" name="button" v-show="visible" :style="customStyle">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="back-icon" aria-hidden="true" style="height: 16px; width: 16px;">
<g>
<path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
</g>
</svg>
</div>
export default {
props:{
visibleHeight: { // 按钮出现条件
type: Number,
default: 400
},
rate: {
type: Number, // 滚动速率
default: 4
},
customStyle: { // 默认样式
type: Object,
default() { // 此处由于是Object 所以要返回一个函数
return {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
}
}
},
data() {
return {
scrollTop: '',
visible: false, // 是否显示
interval: null // 定时器
}
},
mounted() {
// Dom加载完毕时监听scroll事件
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
clearInterval(this.interval)
}
},
methods:{
handleScroll() {
// 判断条件
this.visible = window.pageYOffset > this.visibleHeight
this.scrollTop = window.pageYOffset
},
goTop(e) {
this.interval = setInterval(()=>{
this.scrollTop = this.scrollTop + (-this.scrollTop)/this.rate
window.scrollTo(0,this.scrollTop)
if(this.scrollTop <= 0){
window.scrollTo(0,0)
clearInterval(this.interval)
}
},13)
}
}
}

3.window.scrollTo(x,y)是什么鬼

此方法为滚动到文档中的某个坐标,x 是文档中的横轴坐标。y 是文档中的纵轴坐标。
该函数实际上和 window.scroll是一样的
具体请看MDM介绍

4.组件使用方法

//1. 先引入
import BackTop from '@/components/BackTop/BackTop.vue'
<!-- 2. 页面使用方法 -->
<back-top :visibleHeight="50" :rate="6"></back-top>

缓动动画算法

之前看过张鑫旭大神写过这个方法,所以本文就直接拿来用了,具体算法是

A = A + (B - A) / 2
我下一秒的位置 = 现在位置 + 现在和初始之间距离的一半

参考算法:

张鑫旭-分享一个即插即用的私藏缓动动画JS小算法