离子2无限滚动无法使用标签

时间:2017-04-06 16:11:23

标签: javascript angular ionic2

我正在使用Ionic2。

您的系统信息:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3 Build version 8E162

我有infinite scroll,效果很好,一次装15件。当我向下滚动时,它会加载另外15个,依此类推:

     ...
  </ion-list>

  <ion-infinite-scroll id="infinite-scroll-search" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content id="infinite-scroll-content-search"></ion-infinite-scroll-content>
  </ion-infinite-scroll>

然而,我然后添加tabs,包括我的原始页面:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Page1" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle=Page2" tabIcon="heart"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle=Page3" tabIcon="briefcase"></ion-tab>
</ion-tabs>

标签正常工作,显示在页面底部。但是,当我向下滚动时,doInfinite($event)函数不会像添加选项卡之前那样调用。因此,它不会加载超过15行。

好像选项卡影响了页面滚动事件。滚动到底部不会触发ionInfinite事件并再次调用doIninite($event)

页面第一次加载无限滚动时,如果我点击标签图标加载页面,那么ionInfinite事件就不起作用了。因此,它可能与标签如何尝试缓存数据或其他内容有关。

还有其他人遇到过这个问题吗?有没有人有任何想法我怎么可以调试这个?

任何帮助表示感谢。

1 个答案:

答案 0 :(得分:2)

I fixed this issue by loading the item array in ionViewDidLoad instead of ionViewWillEnter.