📅  最后修改于: 2020-12-08 05:11:44             🧑  作者: Mango
侧面菜单是最常用的离子组件之一。可以通过向左或向右滑动或触发为此创建的按钮来打开侧面菜单。
我们需要的第一个元素是ion-side-menus 。该元素用于将侧边菜单与将要使用它的所有屏幕连接起来。离子侧菜单内容元素是放置内容的位置,离子侧菜单元素是可以放置侧指令的位置。我们将侧面菜单添加到index.html ,并将ion-nav-view放在侧面菜单内容中。这样,可以在整个应用程序中使用侧面菜单。
side = "left">
SIde Menu
现在,我们将使用menu-toggle =“ left”指令创建按钮。此按钮通常放置在应用程序标题栏中,但为了更好的理解,我们会将其添加到模板文件中。
轻按按钮或向右滑动时,将打开侧面菜单。如果您只想用一个按钮关闭侧边菜单,也可以设置menu-close指令,但是我们将为此使用切换按钮。
上面的代码将产生以下屏幕-
您可以向“离子侧菜单”元素添加一些其他属性。显示后退按钮时,可以将具有后视图的启用菜单设置为false以禁用侧面菜单。这还将从标题中隐藏菜单切换按钮。另一个属性是委托句柄,将用于与$ ionicSideMenuDelegate的连接。
离子侧菜单含量元素可以使用其自己的属性。当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();
};
})
下表显示了$ ionicScrollDelegate方法。
Method | Parameters | Type | Details |
---|---|---|---|
toggleLeft(parameter) | isOpen | Boolean | Used for opening or closing side menu. |
toggleRight(parameter) | isOpen | Boolean | Used for opening or closing side menu. |
getOpenRatio() | / | / | Returns ratio of open part over menu width. If half of the menu is open from the left, the ration will be 0.5. If side menu is closed, it will return 0. If half of the menu is open from the right side, it will return -0.5. |
isOpen() | / | Boolean | Returns true if side menu is open, false if it is closed. |
isOpenLeft() | / | Boolean | Returns true if left side menu is open, false if it is closed. |
isOpenRight() | / | Boolean | Returns true if right side menu is open, false if it is closed. |
getScrollPosition() | / | / | Returns object with two number as properties: left and right. These numbers represent the distance the user has scrolled from the left and from the top respectively. |
canDragContent(parameter1) | canDrag | Boolean | Whether the content can be dragged to open side menu. |
edgeDragThreshold(parameter1) | value | Boolean|number | If the value is true, the side menu can be opened by dragging 25px from the edges of the screen. If it is false, dragging is disabled. We can set any number that will represent pixel value from the left and right edge of the screen. |
$getByHandle(parameter1) | handle | string | Used to connect methods to the particular side menu view with the same handle. $ionicSideMenuDelegate. $getByHandle(‘my-handle’).toggleLeft(); |