Ionic / iOS - 离子列表不会滚动答案

【问题标题】：Ionic / iOS - ion-list won't scrollIonic / iOS - 离子列表不会滚动
【发布时间】：2018-01-08 23:03:24
【问题描述】：

我正在尝试使用xcode 运行我的ionic 应用程序：

ionic 包构建 ios 离子科尔多瓦准备

然后我打开xcode 并执行Clean 和Run。在设备上时，滚动行为如下：

我的HTML 看起来像这样：

...

<ion-content no-padding> 
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">


  <div class ='contentone' [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item class="changepadding" *ngFor="let z of items ; let i = index" (click)='expandItem(i)' id='{{i}}' #feedstyle text-wrap>
      <div class="flex" #flex>
        <div class="nonzoomimage">
          <img class="imagepost" src="{{z.pic}}">
        </div>
        <div class="descholder">
          <div class='description'>{{z.description}}</div>
          <div class='link'>{{z.link}}</div>
        </div>
      </div>
      <div class="feedtoptextcontainer" #feedtop>
        <div class="imageparent">
          <img class="postprofilepic" src="{{z.pic}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">Ed Bundy</h4><br>
          <h4 class="poststudio">Ed's Studio</h4>
        </div>
        <div class="postprofilelink">
          <div class="book">Book</div> @edbundyhair
        </div>
      </div>
      <img class="imageposttwo" #imagepost src="{{z.pic}}">
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  </div>
</div>
</ion-content>

...

ion-infinite-scroll 的 doInfinite 函数看起来像这样，它是空的，现在只是一个占位符 - 它什么都不做：

doInfinite(): Promise<any> {
    console.log('Begin async operation');

    return new Promise((resolve) => {
      setTimeout(() => {

        resolve();

      }, 500);
    })
  }

它只是在您尝试滚动时出现故障 - 并且根本不滚动，doInfinite 会触发，因为我可以看到日志消息。

【问题讨论】：

标签： html ios xcode cordova ionic-framework

【解决方案1】：

Ionic 默认使用 Ionic 滚动，它模拟 iOS 设备上看到的 Momentum 滚动，通过添加 overflow-scroll=true 属性，它基本上会使用这个特定的 ion-content 来使用本机滚动（如果你想要全局效果请查看以下链接。

http://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/

还请检查css类是否影响元素的样式！

【讨论】：

【解决方案2】：

只有向上滚动时才会出现错误吗？如果是，请尝试检查： ion-infinite-scroll fires when scrolling up - Ionic

你能尝试从这样简单的开始构建吗？

<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

在您的 .ts 上

fetchMore(event) {
    console.log('Begin fetching more data');

    setTimeout(() => {
      console.log('Async operation has ended');
      event.complete();
    }, 500);
  }

不确定为什么您的代码会导致该故障，但如果您碰巧做了一些简单的工作，当您将其构建为您所拥有的内容时，您会发现导致错误的原因。

可能是$event.waitFor() 仍然存在问题。如果您需要等待诸如获取更多数据时的承诺。你可以有这样的东西。

  fetchMore(event) {
    this.fetchingDataService.fetchPromise().then(
          (moreData) => {
            //append moreData
            event.complete();
          },
          (err) => {
            //do something with error
            event.complete();
          }
        );
  }

【讨论】：

【解决方案3】：

发现问题。升级到 Ionic 3 后，至少在我的情况下，离子滚动中离子列表上的滑动事件冻结了我的滚动。

<ion-scroll scrollY="true">
 <ion-list padding (swipe)="someThing($event)"> <!-- There, swipe, removing it make my ion-scroll scrollable again -->
       <ion-item>
           <p>1</p>
       </ion-item>
      ....
       <ion-item>
           <p>9999</p>
       </ion-item>
     </ion-list>
  </ion-scroll>

【讨论】：