vue-better-scroller
v0.1.1-bata1
Published
> 一款基于 [**better-scroll.js**](https://github.com/ustbhuangyi/better-scroll) (已内置依赖无需导包)<br/> > 为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新<br/> > 使用 es6, vue-cli 3 构建
Downloads
3
Readme
vue-better-scroller
一款基于 better-scroll.js (已内置依赖无需导包) 为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新 使用 es6, vue-cli 3 构建
特点
- 得益于 better-scroll 使用 css3 transform3d 硬件加速实现滚动 即使千条数据也不会有卡顿掉帧
- 使用 css3 calc 实现内部高度,避免使用原生better-scroll的不愉快
- 尽量减少用户配置可渐进式添加功能
安装
NPM安装
$ npm install vue-better-scroller
也可手动下载Common JS 及 UMD JS手动导入 编译好的js文件 放于 dist 文件夹
使用
在 main.js
文件中引入插件并注册
# main.js
import Scroll from "vue-better-scroller";
Vue.use(Scroll)
在项目中使用 vue-better-scroll
<template>
<scroll>
<li></li>
<li></li>
<li></li>
<li></li>
</scroll>
</template>
文档
attr 参数文档
效果
下面截图于本人公司项目DEMO实现 因此无法提供DEMO代码
![复杂列表上拉加载下拉刷新](https://gitee.com/Devifish/vue-better-scroller/raw/master/screenshot/screenshot_1.gif =200x) ![长列表滚动](https://gitee.com/Devifish/vue-better-scroller/raw/master/screenshot/screenshot_2.gif =200x) ![多选项卡滚动](https://gitee.com/Devifish/vue-better-scroller/raw/master/screenshot/screenshot_3.gif =200x)