Ionic5 Vue3 中通过ion-infinite-scroll实现上拉分页加载更

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

Ionic5 Vue3 中通过ion-infinite-scroll实现上拉分页加载更 官方文档：https://ionicframework.com/docs/api/infinite-scroll

一、模板中定义ion-infinite-scroll

 <ion-content>
      <ion-list>
        <ion-item v-for="item in items" :key="item">
          <ion-label>{{ item }}</ion-label>
        </ion-item>
      </ion-list>
      <ion-infinite-scroll
        @ionInfinite="loadData($event)"
        threshold="100px"
        id="infinite-scroll"
        :disabled="isDisabled"
      >
        <ion-infinite-scroll-content
          loading-spinner="bubbles"
          loading-text="Loading more data..."
        >
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>

二、业务逻辑中实现上拉分页加载更多

setup() {
    const isDisabled = ref(false);
    const items: any = ref([]);
    const pushData = () => {
      const max = items.value.length + 20;
      const min = max - 20;
      for (let i = min; i < max; i++) {
        items.value.push(i);
      }
    };

    const loadData = (ev: any) => {
      setTimeout(() => {
        pushData();       
        ev.target.complete();
        // and disable the infinite scroll
        if (items.value.length == 1000) {
          ev.target.disabled = true;
        }
      }, 500);
    };

    pushData();
    return {
      isDisabled,
      loadData,
      items,
    };
  }