discover.html

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only  (click)="goToSearch()" class="search-button">
        <img class="toolbar-img" src="./assets/imgs/logo.png">
        <ion-icon  class="search-icon" name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only (click)="goToPublish()" class="toolbar-signUp">
        <ion-icon class="icon-fabu iconfont"></ion-icon>
        <span class="signUp-span" >发布</span>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only (click)="goToNotice()" class="toolbar-icon">
        <ion-icon class="icon-youjian iconfont"></ion-icon>
        <span *ngIf="noReadNum > 0" class="num">{{noReadNum}}</span>
      </button>
    </ion-buttons>
  </ion-navbar>
    <div class="tabs-fixed">
      <div class="scroll-tab">
        <div class="news-content">
          <div #tabsParent class="tabs-parent">
            <div #tabsChildren *ngFor="let item of tabsList;" (click)="changeParent(item)" class="tabs-children">
              <span #tabSpan [style.color]="indexParent == item.indexParent ? '#e12724':''">{{item.name}}</span>
            </div>
            <span #tips id="tips"></span>
          </div>
        </div>
      </div>
      <div class="scroll-tab">
        <div class="news-content" #newsContent>
          <div class="tabs-parent">
            <div class="tabs-child">
              <span *ngFor="let ch of childrenList" [ngClass]="{'select':indexChildren == ch.indexChildren}" (click)="changeChildren(ch)">{{ch.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</ion-header>
<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="下拉刷新"
                           refreshingSpinner="bubbles">
    </ion-refresher-content>
  </ion-refresher>
  <div class="search-content">
    <ng-container *ngFor="let item of newList">
      <div class="search-item" (click)="goToDetail(item)">
        <p class="item-info">
          <span class="item-source">{{item.source}}</span>
          <span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
        </p>
        <div class="item-news">
          <ion-row class="news-item">
            <ng-container *ngIf="item.imgUrl">
              <ion-col col-8 class="news-left">
                <p class="news-title">{{item.title}}</p>
                <p class="news-end">
                  <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
                  <span>{{item.browseCount}}</span>
                  <ion-icon name="chatboxes"></ion-icon>
                  <span>{{item.commentCount}}</span>
                  <ion-icon name="thumbs-up"></ion-icon>
                  <span>{{item.likeCount}}</span>
                  <ion-icon name="heart"></ion-icon>
                  <span>{{item.collectionCount}}</span>
                </p>
              </ion-col>
              <ion-col col-4 class="news-right">
                <img src="{{picture+item.imgUrl}}">
              </ion-col>
            </ng-container>
            <ng-container *ngIf="!item.imgUrl">
              <ion-col col-12 class="news-left">
                <p class="news-title">{{item.title}}</p>
                <p class="news-end">
                  <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
                  <span>{{item.browseCount}}</span>
                  <ion-icon name="chatboxes"></ion-icon>
                  <span>{{item.commentCount}}</span>
                  <ion-icon name="thumbs-up"></ion-icon>
                  <span>{{item.likeCount}}</span>
                  <ion-icon name="heart"></ion-icon>
                  <span>{{item.collectionCount}}</span>
                </p>
              </ion-col>
            </ng-container>
          </ion-row>
        </div>
      </div>
    </ng-container>
  </div>

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