个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 01:27:18 25 4
gpt4 key购买 nike

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

我的意思是，

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

有人可以指导我如何做到这一点吗？

最佳答案

我已经按照您的要求做了一个小demo，希望对您有所帮助。

Plunker demo

您需要在 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();
    };

});

关于android - 不同页面上的不同侧面菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33272507/

25 4 0
文章推荐： android - 将库项目作为依赖项添加到另一个库项目
文章推荐： php - 使用 Laravel-5 的下拉菜单
文章推荐： php - 发布表单并使用 mysql 更新多行
文章推荐： php - PHP 中的 SQL 查询仅在函数外有效