Ionic JavaScript侧面菜单

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

使用侧边菜单

我们需要的第一个元素是 Ionic侧菜单 。此元素用于将侧面菜单与将使用它的所有屏幕连接。该 Ionic侧面菜单内容 元素，其中的内容将被放置和 Ionic侧面菜单 元素是我们可以把一个地方 侧面 指令。我们将侧面菜单添加到 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 元素添加一些其他属性。在 使菜单与-背视图 可以设置为false，以禁用侧菜单，当返回按钮被显示。这也会隐藏标题中的 菜单切换 按钮。另一个属性是 delegate-handle ，它将用于与 $ ionicSideMenuDelegate 的连接。

该 Ionic侧面菜单内容 元素可以使用自己的属性。当 drag-content 属性设置为false时，它将禁用通过滑动内容屏幕打开侧边菜单的功能。的 边缘拖拽阈 属性具有25.一个默认值。这意味着挥动被允许从屏幕的左和右边缘仅25个像素。我们可以更改此数字值，或者我们可以将其设置为 false 以启用整个屏幕上的滑动，或者将其设置为 true 以禁用它。

该 Ionic侧菜单 可以使用 侧 的属性，我们发现在上述的例子。它将确定菜单是从左侧还是右侧出现。带有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 方法。

代表方法