離子/ iOS設備 - 離子列表不會滾動

Question

我試圖用xcode運行我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> 

... 

我doInfinite功能，ion-infinite-scroll看起來是這樣的，它是空的，只是一個佔位符權現在 - 它什麼都不做：

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

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

     resolve(); 

     }, 500); 
    }) 
    } 

它只是在你嘗試滾動時出現毛刺 - a nd根本不會滾動，因爲我可以看到日誌消息，因此會觸發doInfinite。

Answer 1

離子默認使用Ionic滾動，它通過添加overflow-scroll = true屬性來模擬在iOS設備上看到的Momentum滾動，它將基本上使用此特定的離子內容來使用本地滾動（if你想有一個全球性的影響請查看以下鏈接。

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