网络编程
位置：首页>> 网络编程>> JavaScript>> vue中记录滚动条位置的两种方法

vue中记录滚动条位置的两种方法

作者：爱敲码的老余　　发布时间：2024-04-27 15:59:33　

标签：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()
   },

来源：https://blog.csdn.net/www61621/article/details/127648707

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com