Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

Slides 轮播图组件
Ionic4.x 中的轮播图组件是基于 swiper 插件，所以配置 slides 的属性需要在 swiper 的 api 中

找
Swiper Api:http://idangero.us/swiper/api/

 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>slides</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="slideDidChange()">
    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>
  </ion-slides>
  <br>
  <ion-slides pager="true" #slide2>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/02.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/02.png" alt="">
    </ion-slide>
  </ion-slides>
  <ion-button (click)="slideNext()">
    点击按钮跳转到下一页
  </ion-button>
  <ion-button (click)="slidePrev()">
    点击按钮跳转到上一页
  </ion-button>
</ion-content>

Searchbar 组件

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
    <ion-searchbar placeholder="请输入搜索的内容" animated></ion-searchbar>
    <ion-searchbar placeholder="请输入搜索的内容" animated type="number"></ion-searchbar>
    <ion-searchbar placeholder="请输入搜索的内容" animated  color="success"></ion-searchbar>
    <ion-searchbar placeholder="文本框改变" debounce="500" (ionChange)="doChange()"></ion-searchbar>     
</ion-content>

<ion-header>
  <ion-toolbar>

      <ion-buttons slot="start">
          <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
      </ion-buttons>
    <ion-title>segment</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>


    <ion-segment [(ngModel)]="tab">
      <ion-segment-button value="tab1">
        <ion-label>简介</ion-label>
      </ion-segment-button>
      <ion-segment-button value="tab2">
        <ion-label>详情</ion-label>
      </ion-segment-button>
      <ion-segment-button value="tab3">
          <ion-label>评论</ion-label>
        </ion-segment-button>
    </ion-segment>

    <div class="info" [ngSwitch]="tab">

      <div *ngSwitchCase="'tab1'">
          商品简介   --注意ngSwitchCase写法
      </div>

      <div  *ngSwitchCase="'tab2'">
          商品详情

      </div>
      <div  *ngSwitchCase="'tab3'">
        商品评论     
      </div>
    </div>
</ion-content>