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方法。

委托方法