vue中记录滚动条位置的两种方法
更新时间：2023年01月16日 11:05:41 作者：爱敲码的老余
最近用 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记录滚动条位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文是小编精心给大家收藏整理的关于Vue2.2.0+新特性,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
vue项目中运用webpack动态配置打包多种环境域名的方法
本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧2019-06-06
这篇文章主要介绍了vue3.0如何修改浏览器标题(静态)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue中数据字典dicts的简单说明和用法的相关资料,如果您想在Vue中使用字典查询,您可以使用Vue的计算属性和方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vue2中Element UI表单的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家介绍了vue3封装自定义v-model的hooks示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了vue+iview实现分页及查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面,下面这篇文章主要给大家介绍了关于Vue3点击侧边导航栏完成切换页面内组件的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue中的文字换行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论