Vuescroll 是一个基于 vue.js 2.X的虚拟滚动条

Posted 2021-05-01 web博客推送

Vuescroll 是一个基于 vue.js 2.X的虚拟滚动条，它拥有多个模式可供你选择： slide 模式、native 模式和pure-native模式， 并且它还支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多功能。

特点

• 拥有原生滚动条的滚动行为

• 可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)

• 可以在运行期间在模式之间自由切换

• 能够通过设置滚动动画来平滑地滚动， 请查看easing

• 拉取刷新和推动加载

• 支持分页模式(每次滑动整个页面)

• 支持快照模式(每次滑动滚动一个用户定义的距离)

• 可以检测内容尺寸发生变化

Demo

有两种方式查看Demo:

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

2. 去在线的demo-官网进行查看

开始上手

安装

用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: {
                
            }            // ...
        }
    }
})

2. 使用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 [e-mail]:<Your Usernmae>/vuescroll.git

3. 在你的本地修改代码然后push到你的仓库

受以下的项目启发

slimscroll element-ui scroller

协议

MIT

by wangyi7099