介绍
Vuescroll 一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div 用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
设计它的目的是用来美化和增强你的滚动条。
你可以通过更改配置来选择不同的模式:
native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
你也可以通过更改配置滚动条的样式,包括:
透明度
高度/宽度
位置
背景色
是否保持显示
想了解更多请访问官方网站指南页面
如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
总的来说,Vuescroll 不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。
预览
在线 Demo & 文档
你可以浏览这个 repo 的根目录下的 Demo 文件夹。
详细的 Demo, 文档: 请访问 官方地址.
特点
基本特点
支持自定义滚动条,包括可以设置滚动条/轨道的颜色、透明度。可以设置滚动条是否保持显示。
支持平滑滚动,可以通过设置easing来获得不同的滚动动画。
支持自动检测内容是否发生变化,可以查看这个demo。
只在 slide 模式下有效的特点
支持下拉刷新和上推加载,具体可以查看这个demo和这个 SSR 版本的demo。
支持截断配置,每次滚动固定的距离。可以查看这个 demo
支持分页。可以查看这个 demo
其他特点
支持 SSR, 可以查看这个 demo
快速开始
引入
在你的入口文件处:
import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
为了去掉不会用到的部分,可以分开地引入 vuescroll
只引入 slide 模式的特性
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
只引入 native 模式的特性:
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
用法
把你需要滚动的内容用vuescroll包裹起来即可
export default {
data() {
return {
ops: {
// some configs....
}
}
}
}
指南列表
最后
附上项目的地址 希望朋友们多多star 哈哈