用指令管理vue滾動狀態以及滾動條復原，讓你為所欲為。

Vitaminaq發表於2019-03-20
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

key require value type discribe
name 是 string 用來儲存滾動狀態的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，歡迎一起討論。
詳細描述各種現象部落格地址

相關文章