ionic 4 轮播图、搜索框、切换组件

轮播图

1.手动轮播图：

<ion-content padding>
  <ion-slides pager="true">
    <ion-slide>
         <img src="/assets/icon/food-cake.png">
</ion-slide>
<ion-slide>
            <img src="/assets/icon/food-cookie.png">
   </ion-slide>
  </ion-slides>
</ion-content>

2.自动轮播图：
首先再slides.page.ts如下代码：

 slideOpts ={
        effect:'flip',//轮播效果
        autoplay:{
        delay:2000,
},
  loop:true
};

然后再前台加上：

[options]="slideOpts"

前台代码：

<ion-slides pager="true" [options]="slideOpts">
  <ion-slide>
           <img src="/assets/icon/food-cake.png" alt="">
</ion-slide>
  <ion-slide>
           <img src="/assets/icon/food-cookie.png" alt="">
  </ion-slide>
</ion-slides>

搜索框

1.搜索框：

<ion-searchbar placeholder="请输入搜索内容"></ion-searchbar>

2.搜索框指定搜索类型：

<ion-searchbar placeholder="请输入搜索内容" type="number"></ion-searchbar>

指定搜索类型为数字

3.搜索框指定背景颜色：

<ion-searchbar placeholder="请输入搜索内容" color="success"></ion-searchbar>

切换组件

1.实现切换组件的功能：
前台代码：

<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>
{{tab}}

后台代码加上：

public tab="tab1";

这里也可以通过color来改变颜色。