# 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 ``` ## 文档 组件 attr 参数文档
名称 功能 默认值 可选值
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 } 修改相应参数即可
## 例子 - 单独使用滚动(添加滚动回弹效果及滚动条) ```html
  • ``` - 添加上拉刷新及下拉加载 ```html
  • ``` 注意: 在上拉加载结束后需要调用 ```js this.$refs.scroll.pullupEnd(); ``` 关闭上拉加载功能 ## 效果 下面截图于本人公司项目DEMO实现 因此无法提供DEMO代码