用指令管理vue滚动状态以及滚动条复原,让你为所欲为。

vue-rescroll 是一款滚动状态管理指令化的插件。

install
npm install vue-rescroll --save
复制代码
全局注册/Global registration (main.js)
import VueRescroll from 'vue-rescroll';
Vue.use(VueRescroll);
复制代码
局部注册/Partial registration (*.vue)
import { directive } from 'vue-rescroll';
directives: {
    'rescroll': directive
}
复制代码
*.vue
使用默认配置/use default config
<div v-rescroll="{name: 'A unique marker'}"></div>
复制代码
参数配置/Parameter configuration
keyrequirevaluetypediscribe
namestring用来保存滚动状态的key值
type'default'/'window'string滚动类型(局部,全局)
storageMode'default'/'localstorage'string滚动状态保存方式
domType'default'/'tab'string是否为tab切换组件
<div
    v-rescroll="{
        name: `${id}-scroll`,
        type: 'window',
        storageMode: 'localstorage'
    }"
     ></div>
复制代码
tips

页面不要使用keep-alive缓存,那样的话,钩子函数不会触发。
Don't use keep-alive caching for your pages. In that case, the hook function won't trigger

使用vuex缓存数据/use vuex

async created () {
    if (hasData) return hasData;
    return await this.getData();
}
复制代码

必须要每次刷新的页面/must refreshed

async created () {
    openLoading();
    await this.getData();
    closeLoading();
}
复制代码

github地址,觉得有用,欢迎start,欢迎一起讨论。
详细描述各种现象博客地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值