Question

我想根据所选页面制作具有不同侧边菜单的应用。

我的意思是，

当在页面主页上时，我想要菜单主页左侧菜单。
在页面购物时，我想要菜单购物的左侧菜单。

有人可以给我指示如何做到吗？

Answer 1

我已根据您的要求制作了一个小型演示。希望这对您有帮助。

您需要在index.html文件（左侧和右侧）中创建两个侧边菜单。

<ion-side-menu side="right">
    <!-- Your left side menu content goes here -->
</ion-side-menu>
<ion-side-menu side="right">
    <!-- Your right side menu content goes here -->
</ion-side-menu>

<强>的index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title>Ionic Framework Example</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <ion-side-menus>
        <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-positive nav-title-slide-ios7">
                <ion-nav-back-button class="button-clear">
                    <i class="ion-arrow-left-c"></i> Back
                </ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view animation="slide-left-right"></ion-nav-view>
        </ion-pane>
        <ion-side-menu side="left">
            <ion-content id="menu" has-header="true" ng-controller="mainCtrl">
                <ion-list style="background-color: black !important;border-bottom:white;">
                    <ion-item style="border-style:none !important;">
                        &nbsp;Status
                    </ion-item>
                    <ion-item nav-clear menu-close class="cb-lateral">
                        &nbsp;Profile</ion-item>
                    <ion-item nav-clear menu-close class="cb-lateral">
                        &nbsp;Address</ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
        <ion-side-menu side="right">
            <ion-content id="menu" has-header="true" ng-controller="mainCtrl">
                <ion-list style="background-color: black !important;border-bottom:white;">
                    <ion-item style="border-style:none !important;">
                        &nbsp;Status
                    </ion-item>
                    <ion-item nav-clear menu-close class="cb-lateral">
                        &nbsp;Edit profile</ion-item>
                    <ion-item nav-clear menu-close class="cb-lateral">
                        &nbsp;change address</ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</body>

</html>

<强> home.html的

<ion-view title="User">
    <div class="bar bar-header bar-light">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenuLeft()"></button>
        <div style="width:100%">
        </div>
       </div>
    <ion-content padding="true">
    </ion-content>
</ion-view>

<强> settings.html

<ion-view title="User">
    <div class="bar bar-header bar-light">
        <div style="width:100%">
        </div>
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenuRight()"></button>
    </div>
    <ion-content padding="true">
    </ion-content>
</ion-view>

<强>控制器

app.controller('mainCtrl', function($scope, $state, $ionicSideMenuDelegate) {

    $scope.openMenuLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.openMenuRight = function() {
        $ionicSideMenuDelegate.toggleRight();
    };

});

不同页面上的不同侧面菜单

1 个答案: