个人中心
gpt4 book ai didi

javascript - Ionic 侧面菜单 - 仅在一页上

转载 作者：行者123 更新时间：2023-12-02 15:45:58 24 4
gpt4 key购买 nike

我目前正在使用 Ionic 框架开发一个应用程序，但遇到了以下问题:

应用程序的每个页面都应该有一个可用的左侧菜单。仅在一个页面(“事件”)中，右侧应该有另一个侧面菜单。现在一切正常，直到我访问过“事件”页面一次:从那时起，向左滑动时，每个页面上都会显示一个空的右侧菜单 - 当然，这不应该在那里。

由于我不确定我是否足够好地解释了该行为，因此我制作了一个快速代码笔，供您查看该应用程序和我的完整内容 code .

谢谢!

<小时/>

这里有重要的代码片段:

index.html:

<body ng-controller="MainCtrl" ng-app="ionicApp">

  <ion-side-menus>
    <!--- NAV-MENU LEFT --->
    <ion-side-menu side="left">[...]</ion-side-menu>

    <!--- EVENTS-MENU RIGHT --->
    <ion-side-menu side="right" ng-if="showRightMenu">[...]</ion-side-menu>

    <ion-side-menu-content>

      <!--- HEADER --->
      <ion-nav-bar class="bar bar-header bar-positive">
        <ion-nav-buttons side="left">
          <button class="button button-clear icon ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
          <button class="button button-clear icon ion-gear-a" ng-if="showRightMenu" menu-toggle="right"></button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>

  </ion-side-menus>

  <script id="home.html" type="text/ng-template">[...]</script>
  <script id="events.html" type="text/ng-template">[...]</script>

</body>

app.js:

var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html'
    })
    .state('events', {
      url: '/events',
      templateUrl: 'events.html'
    });
  $urlRouterProvider.otherwise('/');
});

[...]

app.controller('MainCtrl', function($scope, $state, $rootScope) {
  [...]

  //set ng-if-variable for the right side menu
  $rootScope.$on('$stateChangeSuccess',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.name == 'events') {
        $scope.showRightMenu = true;
      } else {
        $scope.showRightMenu = false;
      }

      //console.log($scope.showRightMenu);
    })

  function ContentController($scope, $ionicSideMenuDelegate) {
    $scope.toggleLeft = function() {
      $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.toggleRight = function() {
      $ionicSideMenuDelegate.toggleLeft();
    };
  }
});

[...]

最佳答案

我遇到了同样的问题，这是我发现解决它的最佳方法。

首先，我的菜单有两个模板，一个是标准模板，一个包含右侧菜单。

标准(仅左侧):

<ion-side-menus enable-menu-with-back-views="false" class="dark">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-content> 
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

右侧菜单:

<ion-side-menus enable-menu-with-back-views="false" class="dark">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left"> 
  </ion-side-menu>

  <ion-side-menu side="right"> 
  </ion-side-menu>
</ion-side-menus>

剩下的魔法发生在您的路由设置中，为每个菜单定义一个抽象路由，然后根据需要应用于您的路由:

  $stateProvider
    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl',
    })
    .state('app-right', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/rightMenu.html',
      controller: 'AppCtrl',
    })
    .state('app-right.settings', {
      url: '/settings',
      views: {
        'menuContent': {
          templateUrl: 'templates/settings.html'
        }
      }
    })
    .state('app.about', {
      url: '/about',
      views: {
        'menuContent': {
          templateUrl: 'templates/about.html'
        }
      }
    })

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

24 4 0
文章推荐： javascript - 无法使用 javascript 填充 Select 元素中的选项
文章推荐： c++ - 如何使用成员函数进行标准库范围操作
文章推荐： javascript - Mongodb:子文档数组的聚合值
文章推荐： xamarin - Android 模拟器上的 .Net Maui : StorageWrite permission stops working with .net 7