ionic笔记：tab修改以及懒加载

写在前面：

本文我个人的学习笔记以及记录，来源清参考：IonicBlog - 简书

具体请看：ionic笔记：前言 - 简书

正文：

编译环境：windows10专业版 x64

这里我是用的IDE是webstorm，不需要插件就能满足ionic的开发。

webstorm下载：WebStorm: The Smartest JavaScript IDE by JetBrains

附上一篇webstorm的安装教程：WebStorm安装与使用 - fendo - CSDN博客

在我们开始写代码之前，我们先来了解一下ionic的目录结构（这很重要！这很重要！这很重要！）：IONIC--项目目录结构 - 何不暖阳的博客 - CSDN博客

现在我们来修改我们的tab为：首页推荐、优惠精选、个人中心

修改文件为tabs.html

<ion-tabs>

  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>

  <ion-tab [root]="tab2Root" tabTitle="精选" tabIcon="megaphone"></ion-tab>

  <ion-tab [root]="tab3Root" tabTitle="个人中心" tabIcon="person"></ion-tab>

</ion-tabs>

tabTitle为tab的标题，tabIcon为tab的图标

运行效果图：

image

然后我们接着来看一下ionic的懒加载：ionic3项目实战教程 - 第2讲 ionic3懒加载配置 - 简书
其中about.module.ts、contact.module.ts、home.module.ts、tabs.module.ts 需要我们自己新建

注意：懒加载这里修改完代码后可能会出现错误，需要重新 ionic serve 一次。

这很有用。记得要去看并且操作一番。