@wefly/vue-rescroll

Vue 3.0 plug-in for instruction management scroll state and rolling location restore

Usage no npm install needed!

<script type="module">
  import weflyVueRescroll from 'https://cdn.skypack.dev/@wefly/vue-rescroll';
</script>

README

vue-rescroll 是一款滚动状态管理指令化的插件。
Is a rolling state management instruction plug-in.

https://www.npmjs.com/package/@wefly/vue-rescroll 总下载量

How to use it

install

npm install @wefly/vue-rescroll --save

use

全局注册/Global registration (main.js)

import VueRescroll from '@wefly/vue-rescroll';
Vue.use(VueRescroll);

局部注册/Partial registration (*.vue)

import { directive } from '@wefly/vue-rescroll';
directives: {
    'rescroll': directive
}

*.vue

使用默认配置/use default config
<div v-rescroll="{name: 'A unique marker'}"></div>

参数配置/Parameter configuration

key require value type discribe
name string 用来保存滚动状态的key值
type 'default'/'window' string 滚动类型(局部,全局)
storageMode 'default'/'localstorage' string 滚动状态保存方式
domType 'default'/'tab' string 是否为tab切换组件
```html
<div
v-rescroll="{
name: ${id}-scroll,
type: 'window',
storageMode: 'localstorage'
}"
>
```
### tips
页面不要使用keep-alive缓存,那样的话,钩子函数不会触发。
Don't use keep-alive caching for your pages. In that case, the hook function won't trigger
详细描述各种现象博客地址

example

demo

vue 2.0+

please use vue-rescroll