ionic2控件之Tab

琪凡睿 2017-01-09

 最近在学习利用ionic2框架开发移动app,在学习Tab控件时,遇到了不少问题。

在ionic2之前的版本,所创建的初始项目脚本用的是JavaScript,而如今最新版本创建出的项目中,JavaScript都被typescript所替换,因此接下根本就不知道该怎样去利用typescript去开发。

下面是我遇到的第一个问题:


ionic2控件之Tab
 初始创建的项目中Tab控件默认第一个显示"Home",而我们想动态的让项目第一个显示"Contact"。因此我在网上找遍了TypeScript修改方法,最后找到了下面的这一篇文章:

(注:原文链接http://www.liuzhuang.tech/2016/11/27/Ionic2-Study-%E5%9B%9B/

 通过文章中的代码,我对源项目中的代码做了一下修改

src/pages/tabs/tabs.html
ionic2控件之Tab
 
在第一行代码中 ion-tabs 后面添加了"#mainTabs"。

src/pages/tabs/tabs.ts
ionic2控件之Tab
 
 以上代码中被红框圈起的都是在源文件上添加的

最后的运行结果为:


ionic2控件之Tab
 

相关推荐