Vuescroll

vuescroll 是一个基于 vue.js 2.X虚拟滚动条， 它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。

特点

• 拥有原生滚动条的滚动行为
• 可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)
• 在模式之间自由切换
• 能够通过设置滚动动画来平滑地滚动
• 拉取刷新和推动加载
• 支持分页模式(每次滑动整个页面)
• 支持快照模式(每次滑动滚动一个用户定义的距离)
• 可以检测内容尺寸发生变化

Demo

有两种方式查看 Demo:

1. 打开项目根目录下的 demo 文件夹进行查看
2. 进入官网进行查看

用法

1. 用 npm 或者是 yarn 安装

推荐你用 yarn, 为什么？ Yarn 会对你下载的每一个模块进行缓存， 当你下次再用的时候就不会重新下载了。

npm install vuescroll -S # yarn add vuescroll 

1. 在你的入口文件进行配置

import Vue from 'vue' import vuescroll from 'vuescroll' Vue.use(vuescroll) const vm = new Vue({ el: "#app", data: { ops: { vuescroll: { }, scrollPanel: { } // ... } } }) 

1. 使用 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、事件、配置请到官网进行查看。

如何贡献

如果你对 vuescroll 感兴趣的话，只需要做到以下几步即可。

1. 把这个项目 fork 下来。
2. 把你的 fork 的项目克隆下来

 git clone [email protected]:<Your Usernmae>/vuescroll.git 

1. 在你的本地修改代码然后 push 到你的仓库
2. 在 vuescroll 项目地址点击New pull request即可，如下图所示:
   

受以下的项目启发

slimscroll element-ui scroller

协议

MIT

by wangyi7099