vue-mercury-better-scroll
Version:
a scroll component for Mobile(H5) based on better-scroll(thanks to vue-slim-better-scroll<https://github.com/wannaxiao/vue-slim-better-scroll>
67 lines (52 loc) • 1.07 kB
Markdown
# vue-mercury-better-scroll
> 基于 [better-scroll] thanks to vue-slim-better-scroll(https://github.com/ustbhuangyi/better-scroll)
## 安装
```bash
npm i -S vue-mercury-better-scroll
```
## 引入
* 插件形式全局引入
```js
// 入口文件 main.js 中
import Scroll from 'vue-mercury-better-scroll'
Vue.use(Scroll)
```
* 组件形式引入
```js
// *.vue 中
import Scroll from 'vue-mercury-better-scroll'
export default {
/* ... */
components: {
Scroll,
},
/* ... */
}
```
## 使用
```html
<!-- 简单场景 -->
<Scroll
ref="scroll"
:autoUpdate="true"
@pullingDown="loadRefresh"
@pullingUp="loadMore">
<!-- 滚动的内容 -->
</Scroll>
<!-- 复杂场景 -->
<Scroll
ref="scroll"
:updateData="[data]"
:refreshData="[]"
@pullingDown="loadRefresh"
@pullingUp="loadMore">
<!-- 滚动的内容 -->
</Scroll>
```
## 设置
```html
<!-- 较 vue-slim-better-scroll 增加 loading 动画插槽 -->
<div slot="pullupLoading">pull up loading</div>
<div slot="pulldownLoading">pull down loading</div>
```
## License