<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css"> <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script> <title>Title</title> <!-- $ionicSideMenuDelegate 必须注入 *一个容器元素的侧边菜单和主要内容。 *通过把主要内容区域从一边拖动到另一边, *来让左侧或右侧的侧栏菜单进行切换。 * --> </head> <body ng-controller="myCtrl"> <ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content> <!--页面头部--> <ion-header-bar class="bar-royal"> <!-- 左菜单 --> <button class="button button-clear" ng-click="showLeft()"> <i class="iocn ion-navicon"></i> </button> <h1 class="title">我是标题</h1> <!-- 右菜单 --> <button class="button button-clear" ng-click="showRight()"> <i class="icon ion-settings"></i> </button> </ion-header-bar> <!--页面中间内容--> <ion-content> <ul class="list"> <li ng-repeat="g in goodses"> <span ng-bind="g"></span> </li> </ul> </ion-content> <!--页面底部内容--> <ion-footer-bar class="bar-royal"> <h1 class="title">我是底部</h1> </ion-footer-bar> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> <ul class="list"> <li class="item">侧边菜单</li> <li class="item">侧边菜单</li> <li class="item">侧边菜单</li> <li class="item">侧边菜单</li> <li class="item">侧边菜单</li> </ul> </ion-side-menu> <!-- 右侧菜单 --> <ion-side-menu side="right"> <ul class="list"> <li class="item">软件界面设置</li> <li class="item">软件字体设置</li> <li class="item">背景颜色设置</li> <li class="item">自动翻页设置</li> <li class="item">语音朗诵设置</li> </ul> </ion-side-menu> </ion-side-menus> <script> var app=angular.module("myApp",["ionic"]); app.controller("myCtrl",["$scope","$ionicSideMenuDelegate", function ($scope,$ionicSideMenuDelegate) { $scope.goodses=[]; for(var i=0;i<50;i++){ $scope.goodses.push("不要关空调"+i) } $scope.showLeft = function() { $ionicSideMenuDelegate.toggleLeft(); } $scope.showRight = function() { $ionicSideMenuDelegate.toggleRight(); } }]) </script> </html>
ionic-侧边菜单$ionicSideMenuDelegate
最新推荐文章于 2019-08-24 16:31:05 发布