Ionic Vue中通过ion-refresher实现下拉更新

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

Ionic Vue中通过ion-refresher实现下拉更新

官方文档：https://ionicframework.com/docs/api/refresher

1、模板中配置ion-refresher

 <ion-content>
      <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
    </ion-content>

2、业务逻辑中实现下拉刷新

import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
import { chevronDownCircleOutline } from 'ionicons/icons'
import { defineComponent } from 'vue';
export default defineComponent({
  components: { IonContent, IonRefresher, IonRefresherContent },
  setup() {
    const doRefresh = (event: CustomEvent) => {
      console.log('Begin async operation');
      setTimeout(() => {
        console.log('Async operation has ended');
        event.target.complete();
      }, 2000);
    }
    return { chevronDownCircleOutline, doRefresh }
  }
});