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)="isPublish = true" 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>
  <ion-toolbar class="fixed-toolbar parent-toolbar">
    <div ion-fixed class="tabs-fixed ">
      <div class="scroll-tab">
        <div class="news-content parent">
          <div #tabsParent class="tabs-parent 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>
  </ion-toolbar>
  <ion-toolbar class="fixed-toolbar">
    <div class="tabs-fixed">
      <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-toolbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="下拉刷新"
                           refreshingSpinner="bubbles">
    </ion-refresher-content>
  </ion-refresher>
    <ion-slides (ionSlideDidChange)="slideChange()" loop="true">
      <ion-slide *ngFor="let new of slideList">
        <div class="search-content">
          <ng-container *ngFor="let item of new">
            <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}}
                        <ion-icon *ngIf="new.topTime" class="icon-fire iconfont"></ion-icon>
                      </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}}
                        <ion-icon *ngIf="new.topTime" class="icon-fire iconfont"></ion-icon>
                      </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-slide>
    </ion-slides>


<!--  <ion-infinite-scroll #infiniteScrollContentEle (ionInfinite)="doInfinite($event)">-->
<!--    <ion-infinite-scroll-content-->
<!--            loadingSpinner="bubbles"-->
<!--            loadingText="加载中"></ion-infinite-scroll-content>-->
<!--  </ion-infinite-scroll>-->

  <p class="noData" *ngIf="!loadMore">你已经看到我的底线了</p>

</ion-content>

<div class="publishMisk" *ngIf="isPublish" (click)="close()">
  <div class="content" (click)="stop($event)">
      <div class="image" (click)="goToPublish('image')">
        <ion-icon class="icon iconfont icon-shipin-tianchong"></ion-icon>
        <span>发图文</span></div>
      <div class="video" (click)="goToPublish('video')">
        <ion-icon class="icon-tupian iconfont"></ion-icon>
        <span>发视频</span></div>
  </div>
</div>