如何在 ionic 4 中创建手风琴式侧边菜单
Posted
技术标签:
【中文标题】如何在 ionic 4 中创建手风琴式侧边菜单【英文标题】：How to create Accordion type side menu in ionic 4 【发布时间】：2019-11-22 12:40:25 【问题描述】：我有一个带有手风琴菜单的 ionic 3 项目。现在有必要更新到 ionic 4。 我已将所有代码转换为 ionic 4，但由于路由方法发生了很多变化，我无法将菜单从 Ionic 3 转换为 Ionic 4。 下面给出了 Ionic 3 Accordion 侧边菜单的主要部分代码，如何在 Ionic 4 中使用它...
// Side Menu Component
import SideMenuContentComponent from './../shared/side-menu-content/side-menu-content.component';
import SideMenuSettings from './../shared/side-menu-content/models/side-menu-settings';
import MenuOptionModel from './../shared/side-menu-content/models/menu-option-model';
@Component(
templateUrl: 'app.html'
)
export class MyApp
@ViewChild(Nav) navCtrl: Nav;
// Get the instance to call the public methods
@ViewChild(SideMenuContentComponent) sideMenu: SideMenuContentComponent;
public rootPage: any = WelcomePage;
// Options to show in the SideMenuComponent
public options: Array<MenuOptionModel>;
// Settings for the SideMenuComponent
public sideMenuSettings: SideMenuSettings =
accordionMode: true,
showSelectedOption: true,
selectedOptionClass: 'active-side-menu-option',
subOptionIndentation:
md: '16px',
ios: '64px',
wp: '56px'
;
private unreadCountObservable: any = new ReplaySubject<number>(0);
constructor(private platform: Platform,
private statusBar: StatusBar,
private splashScreen: SplashScreen,
private alertCtrl: AlertController,
private menuCtrl: MenuController)
this.initializeApp();
initializeApp()
this.platform.ready().then(() =>
this.statusBar.styleLightContent();
this.splashScreen.hide();
// Initialize some options
this.initializeOptions();
);
// Change the value for the batch every 5 seconds
setInterval(() =>
this.unreadCountObservable.next(Math.floor(Math.random() * 10));
, 5000);
private initializeOptions(): void
this.options = new Array<MenuOptionModel>();
// Load simple menu options
// ------------------------------------------
this.options.push(
iconName: 'home',
displayName: 'முகப்பு - Home',
component: HomePage,
subItems: [
iconName: 'home',
displayName: 'முகப்பு-Home',
component: HomePage,
,
iconName: 'heart',
displayName: 'அறிமுகம்- Welcome',
component: WelcomePage,
,
iconName: 'information-circle',
displayName: 'எம்மைப் பற்றி- SVK',
component: AboutPage
]
);
【问题讨论】：
【参考方案1】：这个手风琴没有css效果，只为一个级别制作。
如果有人知道如何给这个手风琴添加一些过渡效果，请用它标记我。
第 1 步： 让我们假设您在 ioni4 应用中总共创建了 9 个页面。
第 2 步： 在 assets/data/menus.json 下将您的菜单另存为 json 用有意义的名称和在 app.routing.module.ts 中找到的 url 更改 url
[
"name": "Menu1 ",
"item": [
"icon": "calendar",
"name": "Item1",
"url": "/item1"
,
"icon": "calendar",
"name": "Item2",
"url": "/item2"
,
"icon": "calendar",
"name": "Item3",
"url": "/item3"
]
,
"name": "Menu2",
"item": [
"item": [
"icon": "calendar",
"name": "M2Item1",
"url": "/m2item1"
,
"icon": "calendar",
"name": "M2Item2",
"url": "/m2item2"
,
"icon": "calendar",
"name": "M2Item3",
"url": "/m2item3"
]
,
"name": "Menu3",
"item": [
"item": [
"icon": "calendar",
"name": "M3Item1",
"url": "/m2item1"
,
"icon": "calendar",
"name": "M3Item2",
"url": "/m2item2"
,
"icon": "calendar",
"name": "M3Item3",
"url": "/m2item3"
]
]
第三步：修改 app.component.html 的内容如下：
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" class="mymenu">
<ion-item [routerDirection]="'root'" [routerLink]="['/home']" (click)="clearLevel()">
<ion-label><ion-icon name="home"></ion-icon> Home, About, Contact</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item *ngFor="let p of appPages; let i=index;" [routerDirection]="'root'" (click)="toggleLevel1('idx'+i)" [ngClass]="active: isLevel1Shown('idx'+i)">
<ion-label>
<ion-icon [name]="isLevel1Shown('idx'+i) ? 'md-arrow-dropdown' : 'md-arrow-dropright'" slot="end" style="font-size: 20px;"></ion-icon>
p.name
<ul *ngIf="isLevel1Shown('idx'+i)" class="level2">
<li *ngFor="let i1 of p.item; let l=index;" [routerLink]="[i1.url]">
<ion-menu-toggle auto-hide="false" class="first-level"><ion-icon name="i1.icon"></ion-icon> i1.name</ion-menu-toggle>
</li>
</ul>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
step4：将以下scss添加到app.component.scss文件中：
.level1
padding: 0;
margin: 2px 0;
li
border-top: solid 1px rgb(46, 9, 177);
// padding: 0px 0 0 8px;
.level2
padding-left: 5px;
--background: rgb(218, 248, 241) !important;
color:blue;
line-height: 2.5;
li
border-top: solid 1px orange;
background-color: rgb(230, 248, 226);
padding: 2px 0 0 8px;
font-size: 14px;
ion-split-pane
ion-content
--background: rgb(218, 248, 241) !important;
ion-item
--background: rgb(218, 248, 241) !important;
--color: rgb(71, 3, 148);
第五步：在 app.component.ts 类主体的任意位置添加几行代码：
clearLevel()
this.showLevel1 = null;
this.showLevel2 = null;
// this.showLevel3 = null;
toggleLevel1(idx: string)
if (this.isLevel1Shown(idx))
this.showLevel1 = null;
else
this.showLevel1 = idx;
isLevel1Shown(idx: string)
return this.showLevel1 === idx;
如果我遗漏了本文要提及的内容，请告诉我结果。
【讨论】：
以上是关于如何在 ionic 4 中创建手风琴式侧边菜单的主要内容，如果未能解决你的问题，请参考以下文章
jQuery手风琴菜单 跪求图面上面这种JQ手风琴效果，带排行的。。。