ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Improvement] PullRefresh: add refersh event (#625)

Browse Source
This commit is contained in:
neverland
2018-02-08 10:38:34 +08:00
committed by GitHub
parent c2773b49a6
commit 6ed43f8c75
5 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/markdown/en-US/pull-refresh.md
View File

@@ -9,14 +9,11 @@ Vue.use(PullRefresh);
### Usage
#### Basic Usage
The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
```html
<!-- use v-model to control loading status -->
<van-pull-refresh
v-model="isLoading"
pulling-text="Pull to refresh..."
loosing-text="Loose to refresh..."
loading-text="Loading..."
>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<p>Refresh Count: {{ count }}</p>
</van-pull-refresh>
```
@@ -30,15 +27,13 @@ export default {
}
},
watch: {
isLoading() {
if (this.isLoading) {
setTimeout(() => {
Toast('Refresh Success');
this.isLoading = false;
this.count++;
}, 500);
}
methods: {
onRefresh() {
setTimeout(() => {
this.$toast('Refresh Success');
this.isLoading = false;
this.count++;
}, 500);
}
}
}
@@ -49,12 +44,19 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Loading status | `Boolean` | - | - |
| pulling-text | Text to show when pulling | `String` | `下拉即可刷新...` | - |
| loosing-text | Text to show when loosing | `String` | `释放即可刷新...` | - |
| loading-text | Text to show when loading | `String` | `加载中...` | - |
| pulling-text | Text to show when pulling | `String` | `Pull to refresh...` | - |
| loosing-text | Text to show when loosing | `String` | `Loose to refresh...` | - |
| loading-text | Text to show when loading | `String` | `Loading...` | - |
| animation-duration | Animation duration | `Number` | `300` | - |
| head-height | Height of head | `Number` | `50` | - |
### Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| refresh | Triggered when pull refresh | - |
### Slot
| name | Description |