vuescroll-一个基于 vuejs 的虚拟滚动条

[wangyi7099]

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