javascript - ionic 2 无限滚动不适用于选项卡

标签 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 事件不起作用。所以这可能与选项卡如何尝试缓存数据或其他内容有关。

有没有人遇到过这个问题?有谁知道我该如何调试它?

感谢任何帮助。

最佳答案

我通过在 ionViewDidLoad 而不是 ionViewWillEnter 中加载项目数组来解决这个问题。

关于javascript - ionic 2 无限滚动不适用于选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43260480/

相关文章:

javascript - Sencha Touch 中的选中状态

javascript - rxjs 合并在 Angular5 中无法按预期工作

javascript - Ionic 2 在另一个页面上运行该函数

javascript - 如何使用不同的样式表来 Bootstrap 3 个不同的 View ?

javascript - 如何使 jQuery 动画仅显示在 div 容器/横幅中

javascript - 在 MongoDB View 聚合中使用 $gt 运算符

spring - CORS Angular 和 SpringBoot - 请求被阻止

angular - Angular 多选的自定义触发器

angular - 错误错误 : Uncaught (in promise): TypeError: undefined is not a function

ionic-framework - Ionic2:存储 api url 等静态常量的最佳方法是什么?