vue项目实现返回顶部功能
Posted bbldhf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目实现返回顶部功能相关的知识,希望对你有一定的参考价值。
<!-- 回顶部按钮为一张50*50的图片 -->
<!-- btnFlag 控制图片显示隐藏 -->
<!-- backTop 回顶部的方法 -->
<img v-if="btnFlag" class="go-top" src="图片url" @click="backTop">
vue实例:
// vue的两个生命钩子,这里不多解释。 // window对象,所有浏览器都支持window对象。它表示浏览器窗口,监听滚动事件 mounted () { window.addEventListener(‘scroll‘, this.scrollToTop) }, destroyed () { window.removeEventListener(‘scroll‘, this.scrollToTop) }, methods: { // 点击图片回到顶部方法,加计时器是为了过渡顺滑 backTop () { const that = this let timer = setInterval(() => { let ispeed = Math.floor(-that.scrollTop / 5) document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed if (that.scrollTop === 0) { clearInterval(timer) } }, 16) }, // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏 scrollToTop () { const that = this let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop that.scrollTop = scrollTop if (that.scrollTop > 0) { that.btnFlag = true } else { that.btnFlag = false } } }
以上是关于vue项目实现返回顶部功能的主要内容,如果未能解决你的问题,请参考以下文章
AndroidScrollview返回顶部,快速返回顶部的功能实现,详解代码。