【ionic】总结

Ionic4.x新增底部tabs页面

1.创建tab4模块

ionic g page tab4

2.修改根目录里app-routing,module.ts文件里面的路由配置，去掉默认增加的路由

path:'tab4',loadChildern:

3、tabs.router.module.ts中新增底部tab切换按钮

path:'tab4',loadChildern:'../tab4/tab4.module#tab4PageModule'

4.tabs.page.html中新增底部tab切换按钮

<ion-tabs>
	<ion-tab-bar solt="bottom">

ionic分组

<ion-item-divider>
<ion-label>B</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>B1</ion-label>
</ion-item>
<ion-item>
<ion-label>B2</ion-label

列表加图标

<ion-list>
<ion-item>
<ion-icon slot="start" name="people"></ion-icon>
<ion-label>用户中心</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" name="settings" color="primary"></ion-icon>
<ion-label>设置</ion-label>
</ion-item>
</ion-list>

增加头像

<ion-list lines="full">
<ion-item>
<ion-avatar slot="start">
<img src="assets/01.png" />
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
</ion-list>

滑动列表

像右划出现按钮：

<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item111</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)" color="success">删除</ion-item-option>
<ion-item-option color="primary" color="success">置顶</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>

空白项目加左侧边栏

在app.component.html中写上menuId菜单：

<ion-app>
  <ion-menu menuId="first" side="start" type="overlay">
    <ion-header>
      <ion-toolbar color="success">
        <ion-title>用户信息</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
           <ion-menu-toggle>
            <ion-item [routerDirection]=" ' root' "    [routerLink]=["/news"]>  
            <ion-label>我的新闻</ion-label>
            </ion-item>
                <ion-menu-toggle>
            <ion-item>
              <ion-menu-toggle>
            <ion-label>我的商品</ion-label>
            </ion-item>
               <ion-menu-toggle>
            </ion-list>        
    
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app> 

在首页右滑直接出现侧边栏：