docs(PullRefresh): add custom tip demo
This commit is contained in:
@@ -36,13 +36,13 @@ export default {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 刷新成功提示
|
||||
### 成功提示
|
||||
|
||||
通过`success-text`可以设置刷新成功后的顶部提示文案
|
||||
|
||||
@@ -56,6 +56,45 @@ export default {
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
### 自定义提示
|
||||
|
||||
通过插槽可以自定义下拉刷新过程中的提示内容
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
|
||||
<!-- 下拉提示,通过 scale 实现一个缩放效果 -->
|
||||
<img
|
||||
class="doge"
|
||||
slot="pulling"
|
||||
slot-scope="props"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
:style="{ transform: `scale(${props.distance / 80})` }"
|
||||
>
|
||||
<!-- 释放提示 -->
|
||||
<img
|
||||
class="doge"
|
||||
slot="loosing"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
>
|
||||
<!-- 加载提示 -->
|
||||
<img
|
||||
class="doge"
|
||||
slot="loading"
|
||||
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
|
||||
>
|
||||
<p>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
|
||||
<style>
|
||||
.doge {
|
||||
width: 140px;
|
||||
height: 72px;
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@@ -69,7 +108,7 @@ export default {
|
||||
| success-text | 刷新成功提示文案 | *string* | - | - |
|
||||
| success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | - |
|
||||
| animation-duration | 动画时长 | *number* | `300` | - |
|
||||
| head-height | 顶部内容高度 | *number* | `50` | - |
|
||||
| head-height | 顶部内容高度 | *number* | `50` | 2.4.2 |
|
||||
| disabled | 是否禁用下拉刷新 | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
Reference in New Issue
Block a user