search-new.html

<ion-header>
  <ion-navbar>
    <ion-navbar>
      <div class="search-header">
        <ion-input type="text" placeholder="按姓名搜索" [(ngModel)]="searchObj.title"></ion-input>
        <span class="clear" (click)="search()">搜索</span>
      </div>
    </ion-navbar>
  </ion-navbar>
</ion-header>
<ion-content >

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="下拉刷新"
                           refreshingSpinner="bubbles">
    </ion-refresher-content>
  </ion-refresher>
  <div class="filter-new">
    <ion-row>
      <ion-col col-7></ion-col>
      <ion-col col-2>

      </ion-col>
      <ion-col col-3>
        <ion-segment [(ngModel)]="searchObj.stuffType" (ionChange)="search()">
          <ion-segment-button value="1">
            图文
          </ion-segment-button>
          <ion-segment-button value="2">
            视频
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>
  </div>

  <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.path">
              <ng-container *ngIf="item.resourceType == 1">
                <ion-col col-8 class="news-left">
                  <p class="news-title">{{item.title}}
                    <ion-icon *ngIf="item.topTime"
                              class="icon-fire iconfont"></ion-icon>
                  </p>
                </ion-col>
                <ion-col col-4 class="news-right">
                  <img src="{{picture + item.path}}">
                </ion-col>
              </ng-container>
              <ng-container *ngIf="item.resourceType == 2">
                <ion-col col-12 class="news-left">
                  <p class="news-title">{{item.title}}
                    <ion-icon *ngIf="item.topTime"
                              class="icon-fire iconfont"></ion-icon>
                  </p>
                </ion-col>
              </ng-container>
              <!--    视频  -->
              <ng-container *ngIf="item.resourceType == 3">
                <ion-col col-12 class="news-left">
                  <p class="news-title">{{item.title}}
                    <ion-icon *ngIf="item.topTime"
                              class="icon-fire iconfont"></ion-icon>
                  </p>
                  <div style="width: 100%;max-height: 180px;">
                    <video width="100%" height="100%"
                           crossorigin="anonymous"
                           (canplay)="loadVideo($event)"
                           (play)="clickVideo($event)"
                           preload = "metadata"
                           controls="controls" muted="muted">
                      <source [src]="picture +item.path+ '#t=1' ">
                      您的浏览器不支持 html5。
                    </video>
                  </div>
                </ion-col>
              </ng-container>
            </ng-container>
            <ng-container *ngIf="!item.path">
              <ion-col col-12 class="news-left">
                <p class="news-title">{{item.title}}
                  <ion-icon *ngIf="item.topTime"
                            class="icon-fire iconfont"></ion-icon>
                </p>
              </ion-col>
            </ng-container>
          </ion-row>
        </div>
      </div>
    </ng-container>
  </div>

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