滚动状态管理以及滚动条复原是困扰了我很久的问题，想必也有和我有同样感受的同学，比如首页跳详情页，以及各详情页滚动条的管理，让人感觉很难受，那么如何来简化它呢？那么就使用这款神奇的插件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.
<div v-rescroll="{name: 'A unique marker'}"></div>
V1.0.13以前就不说了，已经废弃了，因为是基于vuex的使用起来有点复杂。
github地址：https://github.com/Vitaminaq/vue-rescroll
有同学觉得这样实用又方便的话，欢迎star，也欢迎同学们一起讨论交流。
有趣灵魂千篇一律
网友评论