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记录滚动条位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue-router定义元信息meta操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
这篇文章主要给大家介绍了关于vue3动态监听浏览器窗口变化的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue3与elementui封装一个便捷Loading，，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下2023-10-10
vue-admin-template模板添加tagsview的实现
本文主要介绍了vue-admin-template模板添加tagsview的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue/cli3版本打包如何去掉soucemap文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue 3引入了Composition API，这是一套新的API用于编写组件，作为Options API的替代，这篇文章主要介绍了如何优化 Vue.js 应用程序,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论