轮播图 |
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来改变颜色。