1、tab页面的切换
在ionic4中实现tab页面的切换需要借助segment组件,然后结合ngSwith来实现,具体实现如下:
<ion-header>
<ion-toolbar>
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="tab1">
<ion-label>商品列表</ion-label>
</ion-segment-button>
<ion-segment-button value="pcontent" value="tab2">
<ion-label>商品详情</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="tabs">
<div *ngSwitchCase="'tab1'">
商品图文信息
</div>
<div *ngSwitchCase="'tab2'">
商品详情
</div>
</div>
{{tab}}
</ion-content>
将tab放在toolbar中,通过点击不同的tab来显示不同页中的内容。
效果如下:
2、日期选择器
引入第三方模板把时间戳转化成 年-月-日的格式,应用一个模块首先需要安装它,在终端输入
npm i silly-datetime --save
然后引入
格式化日期的第三方模块
import sd from 'silly-datetime';
HTML代码:
<ion-list>
<ion-item>
<ion-label>汉化日期按钮</ion-label>
<ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" picker-format="YYYY MM DD"
[(ngModel)]="nowDay" (ionChange)="datetimeChanged($event)"></ion-datetime>
</ion-item>
</ion-list>
ts代码:
import { Component, OnInit } from '@angular/core';
import sd from 'silly-datetime'; // 引入第三方模块
// var sd = require('silly-datetime'); // 引入第三方模块
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
day = '2019-02-14'
public nowDay;
constructor() {
this.nowDay = sd.format(new Date(), 'YYYY-MM-DD');
}
ngOnInit() { }
datetimeChange(e) {
console.log(e);
}
//自定义option
public customPickerOptions = {
buttons: [{
text: '取消',
handler: () => console.log('Clicked 取消!')
}, {
text: '确认',
handler: () => {
console.log('Clicked 确认');
return false;
}
}]
}
}
3、侧边菜单栏
新建一个带tab的项目,如果想在现有的基础上添加侧边栏改如何做呢?
在app.component.html中添加侧边菜单:
<ion-app>
<ion-menu menuId="first" side="start" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>用户信息</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle> //作用是每次点击侧边菜单中的子菜单后,侧边栏收缩
<ion-item [routerLink]="['/news']">
<ion-label>我的新闻</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item [routerLink]="['/products']">
<ion-label>我的商品</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
项目启动时,默认显示的是tab1的页面,所以在tab1页面中加一个点击按钮,点击这个按钮就打开侧边栏
<ion-buttons slot="start">
<ion-menu-button menu="first"></ion-menu-button>
</ion-buttons>
启动项目显示效果如下: