如何在ion-segment中嵌入ion-refresher和ion-list

Question

我想实现ion-segment有多个页面，每个页面都有上拉和下拉刷新，代码如下：

<ion-header>
 <ion-navbar color="primary">
   <ion-title>
     跳蚤市场
   </ion-title>
 </ion-navbar>

 <ion-toolbar no-border-top>
   <ion-segment [(ngModel)]="service">
     <ion-segment-button value="all">
       全部
     </ion-segment-button>
     <ion-segment-button value="digital">
       数码
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>
</ion-header>

<ion-content class="fleamarket-page">
 <div [ngSwitch]="service">
   <div *ngSwitchCase="'all'">
     <ion-refresher (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
         pullingIcon="arrow-round-down"
         pullingText="下拉可以刷新"
         refreshingSpinner="circles"
         refreshingText="正在刷新数据中">
       </ion-refresher-content>
     </ion-refresher>

     <ion-list no-lines>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
     </ion-list>

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content
         loadingSpinner="bubbles"
         loadingText="正在加载更多数据...">
       </ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </div>

   <div *ngSwitchCase="'digital'">
     <ion-refresher (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
         pullingIcon="arrow-round-down"
         pullingText="下拉可以刷新"
         refreshingSpinner="circles"
         refreshingText="正在刷新数据中">
       </ion-refresher-content>
     </ion-refresher>

     <ion-list no-lines>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
     </ion-list>

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content
         loadingSpinner="bubbles"
         loadingText="正在加载更多数据...">
       </ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </div>
 </div>
</ion-content>

但是下拉的时候显示空白

请教老师给个思路，谢谢？

Answer 1

Parry 2016-11-10 16:32:13

下拉能请求到数据吗？执行了对应的函数没有？

Answer 2

慕仰9172702 2017-05-23 10:29:57

请问segment如何默认选中第一个

Answer 3

提问者 慕村2922186 2016-11-11 15:57:43

数据拿到了，但是下拉那一行位置跑下面来了，在content里面，没有显示在该显示的位置