vue-anim-scroll-keeper v1.0.4

vue-anim-scroll-keeper

页面缓存、transition 动画、支持滚动。支持保持多个可滚动元素的状态，通过传递选择器对象，可以指定要保留滚动状态的元素。

功能

1. 后退缓存
2. 前进刷新
3. tab 切换缓存页面
4. 仿原生 App transition 动画（可自定义）
5. 记录页面滚动位置

使用方式

1. npm i vue-anim-scroll-keeper
2. 使用vue-anim-scroll-keeper替换keep-alive

<router-view v-slot="{ Component }">
  <vue-anim-scroll-keeper v-slot='{ key }'> 
      <component :is="Component" :key='key'/>
  </vue-anim-scroll-keeper>
</router-view>

3. 在 app 初始化时，使用 VueAnimScrollKeeper 插件

import VueAnimScrollKeeper from 'vue-anim-scroll-keeper'
import router from './router';

const app = Vue.createApp({})
app.use(VueAnimScrollKeeper({
  router,
  isAllPageMode: false,
  selectors: {
    window: true,
    body: true,
    '.scrollable': true,
  },
}))
...

• 元素想要实现保留滚动位置，selectors内注册的类名选择器必须要有高度height。一个页面有多个滚动区域时，可以注册不同的类名选择器。
• 当isAllPageMode为true时（默认false），会自动为每个页面根元素添加vue-anim-scroll-keeper__page-root类名，可以为该类名设置全局高度。

配置

1. replace 缓存页面

在 tab 栏切换时，需要缓存 tab 页面，可以在 replaceKeep 中配置这些路径

<vue-anim-scroll-keeper v-slot="{ key }" :replaceKeep="['/foo']"> 
    <component :is="Component" :key='key'/>
</vue-anim-scroll-keeper>

2. 支持 keepalive 组件一样的缓存配置

include - 只有名称匹配的组件会被缓存。
exclude - 任何名称匹配的组件都不会被缓存。
max - 最多可以缓存多少组件实例。

3. 配合 transition 使用，需要使用内置 ka-transition 组件替换 transition 组件。已添加默认动画， 可以使用name和 back_name 自定义前进、后退不同动画效果

  <router-view v-slot="{ Component }">
    <ka-transition name='anim-left' back_name='anim-right'>
      <vue-anim-scroll-keeper v-slot="{ key }">
        <component :is="Component" :key='key'/>
      </vue-anim-scroll-keeper>
    </ka-transition>
  </router-view>

4. 当 selectors 设置为 true 时，触发导航(但不是 RouteLink 或 router.push 导航)时，将自动保持和恢复它们的滚动状态。还可以传递自定义方法

app.use(VueAnimScrollKeeper({
  router,
  selectors: {
    window: true,
     body({ to, from, type, savedPosition, element }) {
      if (type === 'push') {
        return false // disable scroll restoration
      }

      // navigation triggered by browser back/forward, or router.back()
      else if (type === 'history') {
        if (to.fullPath === '/') {
          // return a custom position
          return {
            top: 10
          }
        }
        element.scrollTo({
          ...savedPosition,
          behavior: 'smooth',
        })
      }
    }
  },
}))
...