Vuescroll - 一个基于Vue的虚拟滚动条

推荐一个基于Vue的滚动条-Vuescroll

GitHub地址： vuescroll

以前接触过一个后端管理系统， 叫H+， 偶尔发现它用的是左侧菜单没有滚动条， 于是， 我仔细查看dom， 发现H+ 左侧菜单的旁边有一个小的DIV， 我拖动的， 菜单竟然也能滚动， 我明白了， 这是用的虚拟滚动条， 我感觉这个挺不错的， 后来查看这个虚拟滚动条的源码， 发现是一个款叫做SlimScroll的基于jquery的库。由于我对Vue比较熟悉，所以，我想用Vue做一个类似的。

一开始用slimScroll的方法并不理想， slimscroll的滚动内容的方法是：

这有个2致命的缺点：

这两点带来了极差的UI体验！

后来， 我无意中发现了element-ui也是使用了虚拟滚动条， 并且效果很好， 尤其是在手机端滑动， 每次滑动结束手离开屏幕都能继续滑行一段距离， 比slimscroll效果要好，于是我就去element-ui的github上翻scrollbar的源码， 通过阅读源码， 我发现element-ui触发滚动的时机是在onscroll的时候， 也就是说， 把滚动内容的父元素设置为 overflow:scroll ， 然后监听父元素的onScroll事件， 在onScroll事件的callback里面移动滚动内容即可。 经过我的一番改进， 终于能做到和element-ui滚动条滚动的一个效果了。

后来，我又接触到了几个不错的， 并把它们的特点加进来了。 如element-resize-detector, scroller, smooth-scroll， bertter-scroll等等。 现在的Vuescroll已经升级为一个功能强大的滚动条了。

它的基本特点有：

总的来说，Vuescroll不仅仅只一个滚动条， 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。

部分参考资料

Vue图片水平滚动滚动条高亮滚动位置可以使用Vue的v-scroll指令来实现。v-scroll指令可以接受一个参数，用于指定滚动条的高亮位置。例如：<div v-scroll:index="index">，其中index参数用于指定滚动条高亮位置，可以是一个数字或者一个字符串。Vue图片水平滚动滚动条高亮滚动位置可以使用Vue的v-scroll指令来实现。v-scroll指令可以接受一个参数，用于指定滚动条的高亮位置。例如：<div v-scroll:index="index">，其中index参数用于指定滚动条高亮位置，可以是一个数字或者一个字符串。

uni-app支持的通用css单位包括px,rpx

vue页面支持普通H5单位，但在nvue里不支持；

nvue页面还不支持百分比单位

App端，在pages.json里的titleNView或页面里写的plus api中涉及的单位，只支持px，此时不支持rpx。

nvue中，uni-app模式可以使用px,rpx表现与vue中一致，weex模式目前遵循weex的单位；

点击切换实现路由跳转

实现方法： 一、在index.vue的页面入口写一个点击方法，利用uni.navigateTo({})写上将要跳转的页面路径。

                二、 components文件里面创建headerNav.vue组件

                三、在pages.json文件里写上组件路径进去

这里可以选择修改对应的样式信息

scroll-view属性说明：

横向滚动通过添加scroll-x="true"，并且需要在scroll-view的上一级加上row，完成横向滚动

纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴

属性说明：

view的属性说明：

属性说明：

由于 icon 组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。

属性说明：

各平台type值的有效说明：

---