Vue-rescroll is a scroll state management directive plug-in.

install
npm install vue-rescroll --save
Copy the code

Global registration (main.js)

import VueRescroll from 'vue-rescroll';
Vue.use(VueRescroll);
Copy the code

Partial Registration (*.vue)

import { directive } from 'vue-rescroll';
directives: {
    'rescroll': directive
}
Copy the code

*.vue

Use default config
<div v-rescroll="{name: 'A unique marker'}"></div>
Copy the code

Parameter Configuration /Parameter configuration

key require value type discribe
name is string The key used to hold the scroll state
type no ‘default’/’window’ string Scroll type (local, global)
storageMode no ‘default’/’localstorage’ string Scroll state saving mode
domType no ‘default’/’tab’ string Whether to switch components for TAB 
<div
    v-rescroll="{ name: `${id}-scroll`, type: 'window', storageMode: 'localstorage' }"
     ></div>
Copy the code

tips

Do not use the keep-alive cache for the page, otherwise the hook function will not fire. Don’t use keep-alive caching for your pages. In that case, the hook function won’t trigger

Cache data using VUEX /use VUex

async created () {
    if (hasData) return hasData;
    return await this.getData();
}
Copy the code

Must refresh the page every time

async created () {
    openLoading();
    await this.getData();
    closeLoading();
}
Copy the code

Github address, feel useful, welcome start, welcome to discuss together. Detailed description of various phenomena blog address