Vuescroll:基于 vue.js 2.X 的虚拟滚动条

微信扫一扫,分享到朋友圈

Vuescroll:基于 vue.js 2.X 的虚拟滚动条

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: {
                
            }
            // ...
        }
    }
})
  1. 使用vuescroll把需要滚动的内容包裹起来
{{item}}

完整的api、事件、配置请到 官网 进行查看。

如何贡献

首先感谢你对vuescroll感兴趣!只需要做到以下几步即可贡献代码。

  1. 把这个项目fork下来。
  2. 把你的fork的项目克隆下来
git clone git@github.com:/vuescroll.git
  1. 在你的本地修改代码然后push到你的仓库
  2. 在vuescroll项目地址点击 New pull request 即可,如下图所示:

受以下的项目启发

slimscroll element-ui scroller

协议

MIT

by wangyi7099

微信扫一扫,分享到朋友圈

Vuescroll:基于 vue.js 2.X 的虚拟滚动条

交互设计 | 这到底是交互设计还是黑科技?

上一篇

APT团伙(APT-C-01)新利用漏洞样本分析及关联挖掘

下一篇

你也可能喜欢

Vuescroll:基于 vue.js 2.X 的虚拟滚动条

长按储存图像,分享给朋友