Question

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

离子包构建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>

...

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

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

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

        resolve();

      }, 500);
    })
  }

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

Answer 1

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

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

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

Answer 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();
          }
        );
  }

Answer 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>

离子/ iOS - 离子列表不会滚动

3 个答案: