HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标

底部Tab只有3个,现在准备新添加一页,并设置图标


1. 首先创建Setting页面组建。

我没有新建,而好似复制的src/pages下的home文件夹,把代码中home相关的改成setting,变OK了


HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标



2. 设置新页面组建的全局声明

HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标


3. 在tabs.html和tabs.ts中添加新页面

HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标

HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标



4. OK,运行


HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标


5. 图标

可在如下地址中选择,然后在tabs.html中设置就可以了

https://ionicframework.com/docs/ionicons/



HybridAPP:AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标