用指令管理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
javascript

使用vuex緩存數據/use vuexhtml

async created () {
    if (hasData) return hasData;
    return await this.getData();
}
複製代碼

必需要每次刷新的頁面/must refreshedvue

async created () {
    openLoading();
    await this.getData();
    closeLoading();
}
複製代碼

github地址,以爲有用,歡迎start,歡迎一塊兒討論。
詳細描述各類現象博客地址java

相關文章
相關標籤/搜索