Question

以下是我的观点的组件顺序

工具栏
分段按钮作为标签
列表

在2和3之间，我有离子刷新，特别是在iOS上执行pull刷新时，在它完成之前，我再次尝试第二次尝试然后它取下分段按钮标题。

它在我看来是弹跳或溢出滚动问题，但它可能是橡胶弹性滚动。

是否有人遇到过离子这个问题：3.6.1，请提供解决方案

以下是您要求的代码。

1）我有工具栏的单独视图，而在底部我正在添加视图选择器，其中我有 Segmentedbutton 作为标签和列表即“ ”

    <ion-header no-shadow no-border>
      <ion-navbar>
    <ion-grid>
      <ion-row>
        <div>
          <button ion-button (click)="openPage('Settings');">
            <ion-icon ios="ios-options" md="md-settings"></ion-icon>
          </button>
        </div>
        <div class="image-div"><img src="assets/img/logo.svg" width="200" /></div>
        <div>
          <button ion-button (click)="openPage('Alerts');">
            <ion-icon name="ios-notifications-outline">
            </ion-icon>
            <ion-badge [hidden]="!unreadAlertCount()" id="notifications-badge" color="danger">{{unreadAlertCount()}}</ion-badge>
          </button>
        </div>
      </ion-row>
    </ion-grid>
  </ion-navbar>
</ion-header>
<ion-content>
<page-article-feed></page-article-feed>
</ion-content>

2）分段按钮和列表

     <ion-segment id="feed-tabs" class="" [color]="tabsColor" [(ngModel)]="selectedTabIndex" mode="md" class="segment-wrap">
              <ion-segment-button class="article-filter-tag mt1" *ngFor="let filterTag of articleFilters;let i = index" [value]="i" (ionSelect)="onTabSelect(i)"
                [ngClass]="[articleFilters[selectedTabIndex] === filterTag ? 'active ' + filterTag:'']">
                <span>{{tagFormatter(filterTag)}}</span>
                <ion-badge [hidden]="!articleFilterHasUnread(filterTag)">
                {{determineUnreadCountPerFilter(filterTag)}}
              </ion-badge>
              </ion-segment-button>
            </ion-segment>

     <ion-slides (ionSlideDidChange)="onSlideDidChange($event)" (ionSlideDrag)="onDrag($event)" [initialSlide]="selectedTabIndex">
        <ion-slide *ngFor="let filterTag of articleFilters; let k = index">
          <ion-content style="height: 600px; margin-top:53px;">
            <ion-refresher style="margin-top:20px" (ionRefresh)="doRefresh($event)">
              <ion-refresher-content pullingIcon="md-arrow-down" pullingText="Pull to refresh"  refreshingText="Refreshing..."></ion-refresher-content>
            </ion-refresher>
            <ion-list>
              <ion-item *ngFor="let article of articles | articleTag:articleFilters[k]"
                class="article-list-item p3" (click)="goToDetails(article.uuid[0].value)">
                <div [hidden]="!article.unread" class="unread-article-indicator pl1">
                </div>
                <ion-col col-12><h1>{{article.title[0].value}}</h1></ion-col>
                <ion-col col-12><p *ngIf="article.start_date && article.end_date.length>0 && (article.end_date[0].value | humanReadableDateFormat).search('Expired')<0">
                  {{(article.start_date[0].value | humanReadableDateFormat).replace('Expired','Started')}}
                </p></ion-col>
                <ion-col col-12><p *ngIf="article.end_date && article.end_date.length>0">
                  {{(article.end_date[0].value | humanReadableDateFormat).replace('Starts','Ends')}}
                </p></ion-col>
                <ion-col col-12><p *ngIf="!article.end_date && !article.start_date" class="small">
                  {{article.changed[0].value | humanReadableDateFormat}}
                </p></ion-col>
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-slide>
      </ion-slides>

离子-3：拉动刷新取下标题

0 个答案: