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

本文主要是介绍用指令管理vue滚动状态以及滚动条复原，让你为所欲为。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

       用了指令就不可以用keep-alive来进行缓存，因为那样自定义指令里的钩子函数不会触发，自然指令就失效了，一般的滚动插件配合vuex，可以开启数据的局部缓存，就是在页面返回之后不再请求，当滚动条再次拉到vuex里保存的pageindex(后台接口给的页数参数)时再去继续请求。

       对于每个list对应的点击之后进入的详情页如果也需要的保存滚动条的话，也是同样的方法，不过不需要缓存数据，因为没有下拉加载的这些操作。如果想做持久化记录的话，可以使用插件的localstorage模式，这样每次你进到对应的详情都会滚动到你的上次浏览的位置。

       这里比较恶心的，就是tab切换，几个模块共用的是一个滚动条，一个页面滚动了，其他的都会受影响，当时写的时候有点被恶心到了，相信大部分同学应该深有同感，请设置插件的domType为tab，则不会受公用滚动条的影响了。

注意：vue3.0版本请前往这里，用法一样。

install

npm install vue-rescroll --save

use

全局注册/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>

参数

key	require	value	type	discribe
name	是		string	用来保存滚动状态的key值
type	否	'default'/'window'	string	滚动类型(局部，全局)
storageMode	否	'default'/'localstorage'	string	滚动状态保存方式
domType	否	'default'/'tab'	string	是否为tab切换组件

 

<divv-rescroll="{name: `${id}-scroll`,type: 'window',storageMode: 'localstorage'}"
></div>

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

实践项目：传送门

演示地址：传送门 (由于我这里只存放在当前实例上，所以刷新浏览器无效，请滑动到一定距离，进详情页，后退，或者直接在详情页查看)

有同学觉得这样实用又方便的话，欢迎star，欢迎讨论，无时不在。

这篇关于用指令管理vue滚动状态以及滚动条复原，让你为所欲为。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---