Ionic - JavaScript 侧边菜单

侧边菜单是最常用的 Ionic 组件之一。可以通过向左或向右滑动或触发为此目的创建的按钮来打开侧边菜单。

使用侧边菜单

我们需要的第一个元素是 ion-side-menus。此元素用于将侧边菜单与将使用它的所有屏幕连接起来。ion-side-menu-content 元素是放置内容的位置，ion-side-menu 元素是放置 side 指令的位置。我们将侧边菜单添加到 index.html 并将 ion-nav-view 放置在侧边菜单内容内。这样，侧边菜单就可以在整个应用程序中使用。

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

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

</ion-side-menus>

现在，我们将使用 menu-toggle = "left" 指令创建按钮 。此按钮通常放置在应用程序标题栏中，但为了便于理解，我们将把它添加到模板文件中。

当点击按钮或向右滑动时，侧面菜单将打开。如果您希望只有一个按钮用于关闭侧面菜单，您也可以设置 menu-close 指令，但我们将为此使用切换按钮。

HTML 模板

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

上述代码将在屏幕中产生以下内容 −

您可以向 ion-side-menus 元素添加一些其他属性。当显示后退按钮时，可以将 enable-menu-with-back-views 设置为 false 以禁用侧面菜单。这还会从标题中隐藏 menu-toggle 按钮。另一个属性是 delegate-handle，它将用于与 $ionicSideMenuDelegate 的连接。

ion-side-menu-content 元素可以使用其自己的属性。当 drag-content 属性设置为 false 时，它​​将禁用通过滑动内容屏幕打开侧面菜单的功能。edge-drag-threshold 属性的默认值为 25。这意味着只允许从屏幕的左边缘和右边缘滑动 25 个像素。我们可以更改此数值，也可以将其设置为 false 以启用整个屏幕上的滑动，或将其设置为 true 以禁用它。

ion-side-menu 可以使用我们在上面的示例中显示的 side 属性。它将确定菜单应该从左侧还是右侧出现。具有 false 值的 'is-enabled' 属性将禁用侧面菜单，width 属性值是一个数字，表示侧面菜单的宽度。默认值为 275。

侧面菜单委托

$ionicSideMenuDelegate 是用于控制应用程序中所有侧面菜单的服务。我们将向您展示如何使用它，然后我们将介绍所有可用的选项。与所有 Ionic 服务一样，我们需要将其作为依赖项添加到我们的控制器，然后在控制器的范围内使用它。现在，当我们单击按钮时，所有侧面菜单都会打开。

控制器代码

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTML 代码

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

下表显示了 $ionicScrollDelegate 方法。

委托方法