ionic3|ionic3 tab切换
如果不熟悉 Tabs，也可以去ionicframework官网了解一下。
一、底部tab切换，默认选中第二个
html:tabs.html
【ionic3|ionic3 tab切换】ts:
tabs.tsimport { Component,ViewChild} from '@angular/core';
import {Tabs} from 'ionic-angular';
import { PhotoPage } from '../photo/photo';
import { ContactPage } from '../contact/contact';
import { NewsPage } from '../news/news';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tabRoots: Object[];
@ViewChild('myTabs') tabRef: Tabs;
constructor() {
this.tabRoots = [
{
root: NewsPage,
tabTitle: '实时资讯',
tabIcon: 'logo-designernews'
},
{
root: PhotoPage,
tabTitle: 'photo',
tabIcon: 'ios-analytics'
},
{
root: ContactPage,
tabTitle: 'Contact',
tabIcon: 'notifications'
}
];
}
ionViewDidEnter() {
this.tabRef.select(2);
}
}
二、自定义
tab切换
html:
-
{{item.name}}
ts:
public categoryData = https://www.it610.com/article/[];
public select=0;
constructor(public navCtrl: NavController, public navParams: NavParams) {}ionViewDidLoad() {
this.categoryData = this.getCategoryData();
} private getCategoryData() {
this. categoryData = [{
name:"潮流女装",
typeNumber: '102'
},
{
name: "品牌男装",
typeNumber: '103'
},
{
name: "品牌男装",
typeNumber: '103'
}];
for(var i=0;
i推荐阅读
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- tableView|tableView 头视图下拉放大 重写
- 数据库总结语句
- Android实现主页底部菜单中间tab图案凸起
- 前端代码|前端代码 返回顶部 backToTop
- linux定时任务contab
- 242为什么不断切换任务会更容易累（）
- #12-UITableView|#12-UITableView 优化方案
- 洗洗睡了|洗洗睡了 | 休息的时候，千万注意切换你的行为模式
- react-navigation|react-navigation 动态修改 tabBar 样式