如何在ionic vue中附加无限滚动的第二页数据

Question

我使用无限滚动来追加列表，第一页数据可以很好地追加，但是从第二页开始它没有追加，但是它正确地获取了第二页

html

  <ion-list>
        <ion-item v-for="(right_hand_man, index) in right_hand_men" :key="index" style="--color: #272727;margin-left: 5px;margin-right: 5px">
          <ion-label text-wrap @click="() => router.push(`/staff/${right_hand_man.id}/right_hand_man`)">{{ right_hand_man.name }}</ion-label><!--{{ right_hand_man.id }}-->
          <ion-text slot="end" @click="remove(right_hand_man.id)" color="danger" style="font-size: 2vh;"><ion-icon style="color:#ed3e17;font-size: 3vh;" :icon="trashOutline" /></ion-text><!-- Remove -->
          <!--<ion-text slot="end" @click="() => router.push(`/staff/${right_hand_man.id}/right_hand_man`)" color="warning" >Detalles</ion-text>--><!-- View -->
        </ion-item>
      </ion-list>
      <ion-infinite-scroll
        @ionInfinite="getRightHandMen($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>

script

<script>
import {
  IonPage,
  ionText,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonItem,
  IonList,
  IonLabel,
  IonInfiniteScroll,
  IonInfiniteScrollContent,
} from "@ionic/vue";
import ApiService from "@/services/api.service";
import { TokenService } from "@/services/token.service";
import { useRouter } from "vue-router";
import { trashOutline } from "ionicons/icons";

export default {
  name: "Tab3",
  data() {
    return {
      right_hand_men: "",
      trashOutline,
      getRightHandMen_url:`/api/gangBoss/get-boss-rhm/${TokenService.getUserInfo().id}`,
      isDisabled:false,

    };
  },
  components: {
    IonHeader,
    ionText,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonItem,
    IonList,
    IonLabel,
    IonInfiniteScroll,
  IonInfiniteScrollContent,
  },
  methods: {
    remove(rhm_id) {
      ApiService.post(`api/gangBoss/remove-rhm`, { rhm: rhm_id }).then(
        async () => {
          await this.getRightHandMen();
        }
      );
    },
    getRightHandMen: function () {
 const infiniteScroll = document.getElementById('infinite-scroll');

      return ApiService.get(this.getRightHandMen_url).then(
        (response) => {
          console.log(response.data.data)
          this.getRightHandMen_url = response.data.next_page_url;
          this.right_hand_men = response.data.data;
          if(infiniteScroll != null)
         infiniteScroll.complete()
        }
      );
    },
  },
  setup() {
    const router = useRouter();
    return { router };
  },
  created() {
    this.getRightHandMen();
  },
  ionViewWillEnter() {
    this.getRightHandMen();
  },
};
</script>

Answer 1

看起来问题可能出在您对 ion-infinite-scroll 的引用可能是 null，因此 complete() 没有被调用。

docs for ion-infinite-scroll 中的示例显示通过事件目标访问元素引用而不是查询 DOM。

您的模板已经将事件传递给 getRightHandMen 方法：

<ion-infinite-scroll @ionInfinite="getRightHandMen($event)">

...但是您的方法没有使用它。您只需更新您的方法即可使用它。但是，在事件之外有一些方法调用，您没有任何事件数据，因此您必须对事件添加真实性检查，或使用可选链接：

export default {
  methods: {
    getRightHandMen: function (event) {
      const infiniteScroll = event?.target;

      return ApiService.get(this.getRightHandMen_url).then(
        (response) => {
          //...

          infiniteScroll?.complete()
        }
      );
    }
  }
}

如何在ionic vue中附加无限滚动的第二页数据

How to append second page data of infinte scroll in ionic vue

javascript

vue.js

ionic-framework

ionic4