Vant PullRefresh 下拉刷新
Vant PullRefresh 组件主要实现手机端的下拉刷新。
import Vue from 'vue'; import { PullRefresh } from 'vant'; Vue.use(PullRefresh);
下拉刷新时会触发 refresh 事件,在事件的回调中可以进行同步或异步操作,操作完成后将 v-model 设置为 false,表示加载完成。
<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <p>刷新: {{ count }}</p> </van-pull-refresh>
import { Toast } from 'vant'; export default { data() { return { count: 0, isLoading: false } }, methods: { onRefresh() { setTimeout(() => { Toast('刷新成功'); this.isLoading = false; this.count++; }, 1000); } } }
通过success-text可以设置刷新成功后的顶部文案
<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" > <p>刷新: {{ count }}</p> </van-pull-refresh>
通过插槽可以下拉刷新过程中的
<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" rel="external " rel="external " :style="{ transform: `scale(${props.distance / 80})` }" > <!-- 释放 --> <img class="doge" slot="loosing" src="https://img.yzcdn.cn/vant/doge.png" rel="external " rel="external " > <!-- 加载 --> <img class="doge" slot="loading" src="https://img.yzcdn.cn/vant/doge-fire.jpg" rel="external " > <p>刷新: {{ count }}</p> </van-pull-refresh> <style> .doge { width: 140px; height: 72px; margin-top: 8px; border-radius: 4px; } </style>
API
常见问题
参见。