其他分享
首页 > 其他分享> > Vue快速实现列表记忆功能

Vue快速实现列表记忆功能

作者:互联网

 

​技术点

 

1. 为需要开启列表记忆的路由开启keep-alive

2. vue-router的初始化中新增一个配置,scrollBehavior [1]


缺点:

仅在PC上使用较多,因为只有当页面滚动时才有效,如果在页面内某个元素滚动则无法监听到滚动的距离;

比如移动端常用的布局就无法监听(列表头+列表滚动)

// 1. 为需要开启列表记忆的路由开启keep-alive
// 常用操作就是在路由表的配置一个参数keepAlive
// 然后,在根页面App.vue里根据这个参数判断是否被keep-alive包裹

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// 2.vue-router的初始化中新增一个配置,scrollBehavior
​
const router = new VueRouter({
  routes: [...],
  // savedPosition 当浏览器前进和后退时会记录页面X轴和Y轴滚动的距离
  scrollBehavior (to, from, savedPosition) {
    // 当这个值存在时,触发记忆(距离回滚)
    if(savedPosition) {
      return savedPosition
    }
    return { x:0, y:0 }
  }
})

 

通过上面这两步设置,可以解决大多数的场景。


如果有遇到复杂些的场景,也可以参考官方仓库中issue里给出的答案


https://github.com/vuejs/vue-router/issues/1459

https://github.com/vuejs/vue-router/issues/1187



[1] https://router.vuejs.org/zh/api/#scrollbehavior

 

 

同步微信公众号 [时不荒]

标签:vue,滚动,savedPosition,列表,Vue,记忆,router,页面
来源: https://www.cnblogs.com/ViavaCos/p/15226008.html