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

灵感来源

以前接触过一个后端管理系统, 叫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已经升级为一个功能强大的滚动条了。

它的基本特点有:

为Vue量身打造,拥有Vue响应式的特点。
可以通过选择不同的模式来运行在PC端或者手机上:

native

模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于PC端用户。

slide

模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。

pure-native

模式: 滚动条使用原生的滚动条,适用于喜欢原生滚动条的用户。
检测滚动内容发生尺寸变化并自动更新滚动条。
通过使用 不同的滚动动画来平滑滚动。
下拉-刷新 (拉倒顶部并拉出边界开始刷新列表)
上推-加载 (推到底部并且退出边界开始加载列表)
能够放大或者缩小滚动的内容.
分页 (每次滑动整个页面)
截断 (每次滑动一个用户定义的距离)
能够禁止X或Y方向上的滚动。
能够设置滚动条是否保持显示。
能够设置滚动条,轨道的颜色和透明度。
能够设置滚动条,轨道的位置。
能够自定义内容的标签 (也就是说你能够设置内容的标签为一个组件)
总的来说,Vuescroll不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值