滾動狀態管理以及滾動條復原是困擾了我很久的問題，想必也有和我有同樣感受的同學，比如首頁跳詳情頁，以及各詳情頁滾動條的管理，讓人感覺很難受，那麼如何來簡化它呢？那麼就使用這款神奇的外掛vue-rescroll吧，讓你瘋狂飆車，為所欲為。

       最近我在學習了狼族大佬的vuet之後，感覺用指令去管理個頁面，模組之間的滾動很酷炫，又很方便，於是順著大佬的思路，開始利用vuex的狀態管理和vue提供的自定義指令來開發。用了指令就不可以用keep-alive來進行快取，因為那樣自定義指令裡的鉤子函式不會觸發，自然指令就失效了，不過不開啟keep-alive更好，一般的滾動外掛配合vuex，可以開啟資料的區域性快取，就是在頁面返回之後不再請求，當滾動條再次拉到vuex裡儲存的pageindex(後臺介面給的頁數引數)時再去繼續請求。

       對於每個list對應的點選之後進入的詳情頁如果也需要的儲存滾動條的話，且載入一次之後對重新整理請求不是很依賴的話，可以模仿我下面儲存滾動裝的那個scrollPosition類的寫法，把每個剛進入頁面時那個請求的資料快取進vuex，然後判斷是否存在該頁面資料來判斷進入頁面要不要傳送請求，這樣使用效果很好。如何硬是每次進入頁面要重新整理的話，可以在請求的時候加上全屏的loading動畫蓋住，因為不蓋住會有一個從0跳到指定位置的閃動，體驗效果極差，其實加了loading也不能完全保證剛好把跳的時間蓋住了，至少百分之90以上效果很好，還有種解決方法就是加點路由切換動畫，也能達到相同效果。

       這裡比較噁心，就是tab切換，幾個模組共用的是一個滾動條，一個頁面滾動了，其他的都會受影響，當時寫的時候有點被噁心到了，相信大部分同學應該深有同感。

install

npm install vue-rescroll --save

use

v1.0.13

為了使外掛在所有的vue專案中相容，所以把狀態管理從vuex中抽離，自己定義了一套滾動狀態儲存的規則，從而也簡化了該外掛的使用。
In order to make plug-ins compatible in all Vue projects, state management is removed from vuex, and a set of rules for rolling state storage is defined, thus simplifying the use of the plug-in.
main.js

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

如何用在.vue的檔案中（'name' 一定要使用一個不衝突的標誌）；
How to use it in.Vue files ('name'must use a non conflicting flag.

<div v-rescroll="{name: 'A unique marker'}"></div>

V1.0.13以前

這裡用了typescript的語法，你可以換成js來寫。
Here you use the syntax of typescript, and you can write it in JS.

interface Position {
    x: number,
    y: number
}
class ScrollPosition {
    position: Position = {
        x: 0,
        y: 0
    }
    $savePosition (position: Position) {
        return Object.assign(this.position, position);
    }
}

這是我自己在vuex基礎上封裝的程式碼，你可以用正常的vuex寫法編寫
This is my own layer wrapped on vuex to support ES6 class, if you use the default vuex, write the getter, actions, mutations attributes directly, just as normal.

// module ScrollStore
class ScrollStore {
    // state
    state = {
        scroll: {}
    }
    // getter = {_scrollStore}
    _scrollStore (state: any) {
        return state.scroll;
    }
    // mutations = {$openScrollStore, $saveScrollStore, $getScrollStore}
    $openScrollStore (state: any, name: string): this {
        if (state.scroll[name]) return this;
        state.scroll[name] = new ScrollPosition();
        return this;
    }
    $saveScrollStore (state: any, params: any): this {
        const {name, position} = params;
        state.scroll[name].$savePosition(position);
        return this;
    }
    $getScrollStore (state: any, name: string): this {
        return state.scroll[name].position;
    }
}

export default ScrollStore;

main.js

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

如何用在.vue的檔案中（'name' 一定要使用一個不衝突的標誌。path即你儲存滾動條的vuex module名字）；
How to use it in.Vue files ('name'must use a non conflicting flag. Path is the name of the vuex module that you save the scroll bar.

<div v-rescroll="{name: 'A unique marker', path: 'scrollStore'}"></div>

github地址：https://github.com/Vitaminaq/vue-rescroll

有同學覺得這樣實用又方便的話，歡迎star。