vuescroll 是一个基于 vue.js 2.X https://github.com/vuejs/vue 的虚拟滚动条, 它拥有多个模式可供你选择: slide 模式, native 模式和 pure-native 模式, 并且它还支持定制滚动条的样式, 检测内容尺寸变化, 能够使内容分页, 支持上拉 - 刷新, 下推加载等诸多功能.
特点
拥有原生滚动条的滚动行为
可以定制滚动条的样式 (包括颜色, 尺寸, 位置, 透明度, 是否保持显示等)
可以在运行期间在模式之间自由切换
能够通过设置滚动动画来平滑地滚动, 请查看 easing https://wangyi7099.github.io/vuescrolljs/guide/Configuration.html#explanation-2
拉取刷新和推动加载
支持分页模式 (每次滑动整个页面)
支持快照模式 (每次滑动滚动一个用户定义的距离)
可以检测内容尺寸发生变化
Demo
有两种方式查看 Demo:
打开项目根目录下的 demo 文件夹进行查看
去在线的 demo- 官网 https://wangyi7099.github.io/vuescrolljs/zh/guide/ 进行查看
开始上手
安装
用 npm 或者是 yarn 安装
推荐用 yarn, 为什么? Yarn 会对下载的每一个模块进行缓存, 当你下次再用的时候就不会重新下载了.
- npm install vuescroll -S
- # yarn add vuescroll
用法
在你的入口文件进行配置
- import Vue from 'vue'
- import vuescroll from 'vuescroll'
- Vue.use(vuescroll)
- const vm = new Vue({
- el: "#app",
- data: {
- ops: {
- vuescroll: {
- },
- scrollPanel: {
- }
- // ...
- }
- }
- })
使用 vuescroll 把需要滚动的内容包裹起来
- <div id="app">
- <vue-scroll :ops="ops">
- <div
- class="content"
- v-for= "item in 100"
- :key="item"
- >
- <span>{{item}}</span>
- </div>
- </vue-scroll>
- </div>
完整的 api, 事件, 配置请到 官网 https://wangyi7099.github.io/vuescrolljs/zh 进行查看.
如何贡献
首先感谢你对 vuescroll 感兴趣! 只需要做到以下几步即可贡献代码.
把这个项目 fork 下来.
把你的 fork 的项目克隆下来
git clone git@github.com:<Your Usernmae>/vuescroll.git
在你的本地修改代码然后 push 到你的仓库
在 vuescroll 项目地址点击 New pull request 即可, 如下图所示:
受以下的项目启发
slimscroll https://github.com/rochal/jQuery-slimScroll element-ui https://github.com/ElemeFE/element/tree/dev/packages/scrollbar/src https://github.com/pbakaus/scroller
协议
- MIT
- by wangyi7099
来源: http://www.tuicool.com/articles/uaeYVvq