如何在离子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()没有被调用。

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

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

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

但是你的方法没有使用它。你可以简单地更新你的方法来使用它。但是，在事件之外有一些对方法的调用，你没有任何事件数据，所以你必须在事件上添加一个truthy检查，或者使用可选的链接：

export default {
methods: {
getRightHandMen: function (event) {
const infiniteScroll = event?.target;
return ApiService.get(this.getRightHandMen_url).then(
(response) => {
//...
infiniteScroll?.complete()
}
);
}
}
}