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

      滚动状态管理以及滚动条复原是困扰了我很久的问题，想必也有和我有同样感受的同学，比如首页跳详情页，以及各详情页滚动条的管理，让人感觉很难受，那么如何来简化它呢？那么就使用这款神奇的插件vue-rescroll吧，让你疯狂飙车，为所欲为。

      最近我在学习了狼族大佬的vuet之后，感觉用指令去管理个页面，模块之间的滚动很酷炫，又很方便，于是顺着大佬的思路，开始利用vuex的状态管理和vue提供的自定义指令来开发。用了指令就不可以用keep-alive来进行缓存，因为那样自定义指令里的钩子函数不会触发，自然指令就失效了，不过不开启keep-alive更好，一般的滚动插件配合vuex，可以开启数据的局部缓存，就是在页面返回之后不再请求，当滚动条再次拉到vuex里保存的pageindex(后台接口给的页数参数)时再去继续请求。

      对于每个list对应的点击之后进入的详情页如果也需要的保存滚动条的话，且加载一次之后对刷新请求不是很依赖的话，可以把每个刚进入页面时那个请求的数据缓存进vuex，然后判断是否存在该页面数据来判断进入页面要不要发送请求，这样使用效果很好。如何硬是每次进入页面要刷新的话，可以在请求的时候加上全屏的loading动画盖住，因为不盖住会有一个从0跳到指定位置的闪动，体验效果极差，其实加了loading也不能完全保证刚好把跳的时间盖住了，至少百分之90以上效果很好，还有种解决方法就是加点路由切换动画，也能达到相同效果。最好的就是把loading动画放到axios拦截器里，不过这样子就需要去做区分了，有点恶心。

use vuex

async created () {

    if (hasData) return hasData;

    return await this.getData();

}

must refreshed

async created () {

    openLoading();

    await this.getData();

    closeLoading();

}

      这里比较恶心，就是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.

V1.0.13以前就不说了，已经废弃了，因为是基于vuex的使用起来有点复杂。

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

有同学觉得这样实用又方便的话，欢迎star，也欢迎同学们一起讨论交流。

有趣灵魂千篇一律