Ionic 左侧菜单(登录主页详情demo)

1.项目结构

2.截图效果展示

3.主要js 代码

     $stateProvider

       .state('app', {

         url: "/app",

         abstract: true,

         templateUrl: "templates/menu.html",

         controller: 'MenuCtrl'

       })

     //用户

     .state('login', {

       url: '/login',

       templateUrl: 'templates/login.html',

       controller: 'LoginCtrl'

     })

       .state('app.home', {

         url: "/home",

         views: {

           'menuContent' :{

             templateUrl: "templates/home.html",

             controller: 'HomeCtrl'

           },

           'menuList': {

             templateUrl : "templates/menulist.html"

           }

         }

       })

       .state('app.users', {

         url: "/users",

         views: {

           'menuContent' :{

             templateUrl: "templates/users.html",

             controller: 'MenuCtrl'

           },

           'menuList': {

             templateUrl : "templates/menulist.html"

           }

         }

       })

       .state('app.orderdetails', {

       url: "/orderdetails/:orderid",

       views: {

         'menuContent' :{

           templateUrl: "templates/orderdetail.html",

           controller: 'MenuCtrl'

         }

       }

     });

     $urlRouterProvider.otherwise('login');

 .controller('HomeCtrl',function ($scope, $state,$ionicSideMenuDelegate, $ionicLoading, Storage, ENV, $ionicPopup, $stateParams,$interval){

     $scope.orderList = [

       { orderNo: 'B101', id: 1 },

       { orderNo: 'B102', id: 2 },

       { orderNo: 'B103', id: 3 },

       { orderNo: 'B104', id: 4 },

       { orderNo: 'B105', id: 5 },

       { orderNo: 'B106', id: 6 }

     ];

   })

4.html 页面代码

index.html

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

     <title></title>

     <link href="lib/ionic/css/ionic.css" rel="stylesheet">

     <link href="css/style.css" rel="stylesheet">

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

     <link href="css/ionic.app.css" rel="stylesheet">

     -->

     <!-- ionic/angularjs js -->

     <script src="lib/ionic/js/ionic.bundle.js"></script>

     <!-- cordova script (this will be a 404 during development) -->

     <script src="cordova.js"></script>

     <!-- your app's js -->

     <script src="js/app.js"></script>

     <script src="js/controllers.js"></script>

     <script src="js/services.js"></script>

     <script src="js/config.js"></script>

     <script src="js/directive.js"></script>

   </head>

   <body ng-app="deliveryAPP">

   <ion-nav-view>

   </ion-nav-view>

   </body>

 </html>

menu.html

 <ion-side-menus >

     <ion-side-menu-content  drag-content="false">

       <ion-nav-bar class="bar-stable bar-positive"><!--nav-title-slide-ios7-->

         <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> 返回</ion-nav-back-button>

       </ion-nav-bar>

       <ion-nav-view name="menuContent" animation="slide-left-right" ></ion-nav-view>

     </ion-side-menu-content>

   <ion-side-menu side="left">

     <ion-nav-view name="menuList"></ion-nav-view>

   </ion-side-menu>

 </ion-side-menus>

drag-content="false" 是否允许拖动内容打开侧栏菜单，默认为 true

side="left" 左侧菜单

menuList.html

 <header class="bar bar-header bar-stable">

   <h1 class="title">菜单功能</h1>

 </header>

 <ion-content class="has-header">

   <ion-list>

     <ion-item nav-clear menu-close href="#/app/home">

       订单管理

     </ion-item>

     <ion-item nav-clear menu-close href="#/app/users">

       我的管理

     </ion-item>

   </ion-list>

 </ion-content>

巴特西

Ionic 左侧菜单(登录主页详情demo)

最新文章

热门文章