Ionic的安装、创建、及一些记录

安装nodejs

安装ionic

npm install -g ionic

创建项目

ionic start myapp tabs //这里有三个选项blank tabs sidemenu

运行项目

ionic serve

创建page页面

ionic g page pagename

创建Tab页面

  1

ionic g page tab4

  2.删除app-routing.module.ts内对于的路由

  3.在tabs-routing.module.ts文件中模仿已有tab,新增对于路由

   {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },

  4.tabs.page.html中模仿已有tab,新增相应按钮

 <ion-tab-button tab="tab4">
      <ion-icon name="apps-outline"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>

Ionic里的页面实际上是模块,同时组件无法被多个模块共享,因此可以将组件封装成一个模块,自定义模块可参考Angular自定义模块

同时在自定义模块的ts文件中需要引入IonicModule才能使用IonIC的一些标签,例如ion-list

 列表分组

<ion-list>
  <ion-item-divider>
    <ion-label>Label</ion-label>
  </ion-item-divider>
   <ion-item>aaa</ion-item>
   <ion-item>aaa</ion-item>
   <ion-item>aaa</ion-item>
  <ion-item-divider>
    <ion-label>Labe2</ion-label>
  </ion-item-divider>
  <ion-item>bbb</ion-item>
  <ion-item>bbb</ion-item>
  <ion-item>bbb</ion-item>
  <ion-item-divider>
</ion-list>
 

 

posted @ 2020-08-31 10:09  DurianTRY  阅读(191)  评论(0编辑  收藏  举报