Ionic - JavaScript 侧边菜单

---

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

使用侧面菜单

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

索引.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"指令创建按钮。该按钮通常会放置在应用程序标题栏中，但我们会将其添加到模板文件中以便更好地理解。

当点击按钮或向右滑动时，侧面菜单将打开。如果您希望有一个按钮仅用于关闭侧面菜单，您还可以设置菜单关闭指令，但我们将使用切换按钮来实现此目的。

HTML模板

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

上面的代码将产生以下屏幕 -

您可以向ion-side-menus元素添加一些附加属性。当显示后退按钮时，enable-menu-with-back-views 可以设置为 false 以禁用侧面菜单。这还将隐藏标题中的菜单切换按钮。另一个属性是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方法。

委托方法