准备
首先使用ionic g page searchbar
和ionic g page segment
生成两个页面用于测试搜索框组件和分段器组件
然后在tab1页面新建连个按钮用于链接到这两个页面
tab1.page.html:
<ion-button [routerLink]="['/searchbar']">
跳转到searchbar页面
</ion-button>
<ion-button [routerLink]="['/segment']">
跳转到segment页面
</ion-button>
搜索框组件searchbar
参考文档:https://ionicframework.com/docs/api/searchbar
普通搜索框功能
我们可以使用ion-searchbar来实现搜索框的功能
searchbar.page.html:
<ion-searchbar placeholder="请输入搜索的内容" ></ion-searchbar>
形成的页面效果如下是
可以到刚开始搜索框内会有一个默认的灰显内容,这个是由placeholder定义的,当我们点击的时候提示会消失并显示光标,让我们输入内容
动态搜索框 animated
我们可以使用animated来实现动态搜索框功能
searchbar.page.html:
<ion-searchbar placeholder="请输入搜索的内容" animated></ion-searchbar>
可以看到默认提示显示在中间
当点击搜索框后,提示一道左侧,并显示光标
输入类型
我们可以通过设置type来设置输入类型,type的类型可以在文档中查到,我们就用number来测试
searchbar.page.html:
<ion-searchbar placeholder="请输入搜索的内容" animated type="number"></ion-searchbar>
设置之后,页面只能输入数字类型,输入字母等搜索框没反应
color颜色
我们可以根据color颜色属性来设置搜索框颜色
<ion-searchbar placeholder="请输入搜索的内容" animated color="success"></ion-searchbar>
搜索框防抖动debounce
搜索框有一个ionChange的事件,普通情况下,每当我们有更改就会触发事件,但是我们不希望事件这样频繁触发,所有就用到了debounce防抖动
searchbar.page.html:
<ion-searchbar placeholder="文本框改变" (ionChange)="doChange()" debounce="500"></ion-searchbar>
searchbar.page.ts:
doChange(){
console.log(111);
}
这样,当搜索框有改变的时候,过500ms才会触发事件方法
分段器组件segment
定义
分段器我们可以使用ion-segment和ion-segment-button来实现
segment.page.html:
<ion-segment>
<ion-segment-button>
<ion-label>详情</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>简介</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>评论</ion-label>
</ion-segment-button>
</ion-segment>
双向绑定值切换
接着我们就可以利用segment实现切换内容的功能
segment.page.html:
<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>
segment.page.ts:
tab:any= 'tab1';
这段代码中我们在ts中定义了一个tab变量,并如遇默认值,然后我们在ion-segment上动态绑定这个变量,给每个ion-segment-button上定义相应的value值
进入这个页面后,默认的为tab1,当我们切换后,tab变量就变成相应的value值,我们可以用{{tab}}来显示tab值
页面切换
我们使用ngSwitch来实现定义不同的界面
<div [ngSwitch]="tab">
<div *ngSwitchCase="'tab1'">
商品详情--注意ngSwitchCase的写法
</div>
<div *ngSwitchCase="'tab2'">商品简介</div>
<div *ngSwitchCase="'tab3'">商品评论</div>
</div>
代码中我们根据tab的不同值显示不同的内容,注意ngSwitchCase的tab1等要用单引号引上
效果如下: