vue中记录滚动条位置的两种方法
作者：爱敲码的老余
最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下
1、方法一
在点击的时候记录滚动条位置，存入本地
再次进入该路由读取滚动跳位置
1、1 跳转时路由存入scroll 如果要有多个页面，可以把名称也存进去，这里默认一个页面
methods: {
go() {
console.log(document.documentElement.scrollTop)
localStorage.setItem("scroll", document.documentElement.scrollTop)
this.$router.push({path: '/'})
}
}1、2 读取scroll位置 再次进入该路由时从本地录取scroll位置
利用scrollBehavior ,在
router/index.js中，配置路由中的scrollBehaviors事件
const router = new VueRouter({
mode: 'hash',
routes,
scrollBehavior(to, from){
if(to.name==='fatherSlot'){ //name为路由名字
return {x:0, y: parseInt(localStorage.getItem('scroll'))}//读取本地的scroll
}
console.log("to",to,"from",from)
}
})2、方法二
利用
vue的keep-alive, 使用缓存机制来记录滚动条位置
但是有个缺点，页面刷新后就不记录了，但是简单高效
2、1 配置需要缓存的路由 缓存pageA,pageB,里面代码都一样，如演示图一样。pageA,pageC为组件的名字.
html
<keep-alive :include="['pageA','pageC']">
<router-view/>
</keep-alive>2、2 在路由内记录滚动位置
javascript
data() {
return {
curScrollTop: 0 //记录滚动条位置对象
}
},
//此钩子函数会反复触发,是keep-alive特有的钩子函数，取
activated() {
document.documentElement.scrollTop = this.curScrollTop || 0
},
//路由离开时的钩子函数,存
beforeRouteLeave (to, from, next) {
this.curScrollTop = document.documentElement.scrollTop || 0
next()
},总结
到此这篇关于vue中记录滚动条位置的两种方法的文章就介绍到这了,更多相关vue记录滚动条位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！