bug: ionic vue infinite scroll not working properly

[xlanghejianfeng]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

<ion-infinite-scroll threshold="100px" id="infinite-scroll">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="加载更多数据…"
        >
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

insert short code snippets here
 onMounted(() => {
      const infiniteScroll = document.getElementById("infinite-scroll");
      console.log(infiniteScroll);
      if (infiniteScroll != null) {
        infiniteScroll.addEventListener("ionInfinite", (event: any) => {
          console.log(event);
          setTimeout(function () {
            console.log("Done");
            event.target.complete();
            // App logic to determine if all data is loaded
            // and disable the infinite scroll
            event.target.disabled = false;
          }, 500);

          //判断是否有更多数据
          if (data.hasmore == false) {
            event.target.complete();
            return;
          }
          const params = {
            pageNo: 1,
            pageSize: 10,
          };
          const result = api.invoiceList(params);
          //判断是否获取到数据
          // if (result.data.length > 0) {
          //   //将获取的数据表与已有数据表连接（concat）
          //   invoiceList.value = invoiceList.value.concat(result.data);
          //   params.pageNo += 1;
          // } else {
          //   hasmore.value = false;
          //   console.log("已加载所有数据！");
          // }
          event.target.complete();
        });
      }

      // 首屏加载的时候触发请求
      loadMore();
    });

Other information:

Ionic info:

insert the output from ionic info here
"vue": "^3.0.0-0",
"@ionic/vue": "^0.4.0",

[liamdebeasi]

Hi there,

Can you please describe the issue you are running into?

[xlanghejianfeng]

Thanks for your reply. May I have a demo of infiniteScroll supported by ionic5 and vue3.0 as detailed as possible? If there is not such a demo, please let me know directly and I will figure out another method.

发自我的iPhone

------------------ Original ------------------ From: Liam DeBeasi <notifications@github.com> Date: Mon,Oct 5,2020 9:28 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: xlanghejianfeng <717560379@qq.com>, Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] feat: ionic vue infinite scroll support (#22250)

Hi there,

Can you please describe the issue you are running into?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[liamdebeasi]

Can you please describe the issue you are running into? Most Ionic components should work, but if there is an issue it would be helpful to know what it is.

[xlanghejianfeng]

<ion-infinite-scroll threshold="100px" id="infinite-scroll"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多数据…" > </ion-infinite-scroll-content> </ion-infinite-scroll> insert short code snippets here onMounted(() => { const infiniteScroll = document.getElementById("infinite-scroll"); console.log(infiniteScroll); if (infiniteScroll != null) { infiniteScroll.addEventListener("ionInfinite", (event: any) => { console.log(event); setTimeout(function () { console.log("Done"); event.target.complete(); // App logic to determine if all data is loaded // and disable the infinite scroll event.target.disabled = false; }, 500); //判断是否有更多数据 if (data.hasmore == false) { event.target.complete(); return; } const params = { pageNo: 1, pageSize: 10, }; const result = api.invoiceList(params); //判断是否获取到数据 // if (result.data.length > 0) { // //将获取的数据表与已有数据表连接（concat） // invoiceList.value = invoiceList.value.concat(result.data); // params.pageNo += 1; // } else { // hasmore.value = false; // console.log("已加载所有数据！"); // } event.target.complete(); }); } // 首屏加载的时候触发请求 loadMore(); The thing is that I add the event ionInfinite in the code lines as you can see, but it doesn’t work, I guess the reason is that Vue3.0 doesn’t support the operation of dom?

发自我的iPhone

------------------ Original ------------------ From: Liam DeBeasi <notifications@github.com> Date: Mon,Oct 5,2020 10:09 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: xlanghejianfeng <717560379@qq.com>, Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] feat: ionic vue infinite scroll support (#22250)

Can you please describe the issue you are running into? Most Ionic components should work, but if there is an issue it would be helpful to know what it is.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[liamdebeasi]

Can you please provide a GitHub repo that shows this issue happening? Code snippets are typically not enough to reproduce the issue.

[xlanghejianfeng]

Can vue3.0 support definitely the event of infiniteScroll? I’m sure Angular can do that, but I cannot make sure vue 3.0 can do so.

发自我的iPhone

------------------ Original ------------------ From: Liam DeBeasi <notifications@github.com> Date: Mon,Oct 5,2020 10:23 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: xlanghejianfeng <717560379@qq.com>, Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] feat: ionic vue infinite scroll support (#22250)

Can you please provide a GitHub repo that shows this issue happening? Code snippets are typically not enough to reproduce the issue.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[liamdebeasi]

Ionic Vue should support ion-infinite-scroll. It would be helpful to have a GitHub repo that shows any issues you are running into so I can resolve them.

[liamdebeasi]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!