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

委託方法