<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ionic 侧边栏菜单的简单实现</title> <link rel="stylesheet"href="../ionic/css/ionic.css"> <script src="../ionic/js/ionic.bundle.min.js"></script> <script> varapp= angular.module("myApp",['ionic']); app.controller("myCtrl",function ($scope) { $scope.settings = ["关注","粉丝","收藏","设置"]; $scope.users = ["狗剩","喜娃","二愣子"]; }); </script></head><body ng-app="myApp"ng-controller="myCtrl"> <!-- ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。用法：使用侧栏菜单，添加一个父元素<ion-side-menus>，一个中间内容 <ion-side-menu-content>，一个自定义左右侧菜单 <ion-side-menu> 指令。 --> <!-- 1. 父元素<ion-side-menus> --> <ion-side-menus> <!-- 2. 中间内容 <ion-side-menu-content> --><ion-side-menu-content> <ion-header-bar align-title="center"class="bar-calm"><h1 class="title">主页 Content</h1> </ion-header-bar> <ion-content><ion-list><ion-item ng-repeat="iteminusers"> {{item}} </ion-item></ion-list> </ion-content> </ion-side-menu-content><!-- 3. 自定义左右侧菜单 <ion-side-menu> 指令--> <!--左侧菜单--><ion-side-menu side="left"> <ion-header-bar align-title="left"class="bar-light"><h2 class="title">个人中心</h2> </ion-header-bar> <ion-content><ion-list><ion-item ng-repeat="iteminsettings"> {{item}}</ion-item></ion-list> </ion-content> </ion-side-menu> <!--右侧菜单--><ion-side-menu side="right"> <h3 align="center">这里是：<br>右侧菜单side-menu</h3> </ion-side-menu> </ion-side-menus></body></html>
