离子3-无限滚动与水平滚动

时间:2018-09-11 10:01:24

标签: ionic3 ion-scroll ion-infinite-scroll

我已经将无限滚动与“垂直滚动”一起使用,并且可以按预期工作。

在另一个页面上,我有多个“水平滚动条”。我也想使它们无限滚动。我在水平滚动中使用了<ion-infinite-scroll>标签,但是它似乎没有按要求工作。我也用Google搜索,但是找不到太多帮助。

我在下面粘贴我的代码。 <ion-scroll scrollX="true"> <ion-card *ngFor="let x of y"> ... </ion-card> <ion-infinite-scroll (ionInfinite)="doInfinite($event, y)"> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-scroll>

我注意到的一件事是,当我一直滚动到页面底部时,所有水平滚动都调用ionInfinite方法。因此,似乎触发了垂直无限滚动,而不是水平无限滚动。

请让我知道我是否遗漏了任何东西,或者是否有任何特定的方式需要编写代码。

1 个答案:

答案 0 :(得分:0)

您无法使用Ionic做到这一点,但是您可以自己做到:

模板:

<div (scroll)="YOURMETHOD($event)">
    //do something
</div>

Page.ts:

public YOURMETHOD(event:any){
    console.log(event)
}

离子:

   Ionic CLI                     : 5.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1