# vue-better-scroller
**Repository Path**: Devifish/vue-better-scroller
## Basic Information
- **Project Name**: vue-better-scroller
- **Description**: 一款基于 better-scroll.js 为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新功能扩展组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 87
- **Forks**: 21
- **Created**: 2018-12-28
- **Last Updated**: 2025-04-17
## Categories & Tags
**Categories**: vue-extensions
**Tags**: None
## README
# vue-better-scroller
> 一款基于 [**better-scroll.js**](https://github.com/ustbhuangyi/better-scroll) (已内置依赖无需导包)
> 为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新
> 使用 es6, vue-cli 3 构建
## 特点
- 得益于 better-scroll 使用 css3 transform3d 硬件加速实现滚动
即使千条数据也不会有卡顿掉帧
- 使用 css3 calc 实现内部高度,避免使用原生better-scroll的不愉快
- 尽量减少用户配置可渐进式添加功能
## 安装
NPM安装
``` bash
$ npm install vue-better-scroller
```
也可手动下载Common JS 及 UMD JS手动导入
编译好的js文件 放于 dist 文件夹
## 使用
在 `main.js` 文件中引入插件并注册
``` bash
# main.js
import Scroll from "vue-better-scroller";
Vue.use(Scroll)
```
```html
名称 | 功能 | 默认值 | 可选值 |
data | 用于监听数据变化停止上拉下拉状态 | 空 | object / array |
scrollbar | 是否显示滚动条 | false | true / false |
direction(开发中) | 滚动方向 | vertical | vertical / horizontal |
bounce | 各方向回弹效果开关 | { top: true, bottom: true, left: true, right: true } | 修改相应参数即可 |
options | 可选功能(如开启关闭上拉加载下拉刷新) | { pullup: false, pulldown: false, click: true, probeType: 0 } | 修改相应参数即可 |