ionic 侧滑菜单

来源：互联网发布：微信群淘宝优惠券代理编辑：程序博客网时间：2024/05/22 10:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="ionic/css/ionic.min.css">    <script src="ionic/js/ionic.bundle.min.js"></script>  <script>      var app=angular.module("myAPP",['ionic']).controller("myCtrl",function ($scope) {          $scope.furit=["苹果","葡萄","香蕉"];          $scope.settings=["我的水果","我的零食","我的牛奶","我的面包"];          $scope.report=["表达","技能","态度","自学能力"];      });  </script></head><body ng-app="myAPP" ng-controller="myCtrl">   <ion-side-menus>       <!--中间内容-->       <ion-side-menu-content>           <ion-header-bar style="background-color: #33cd5f">               <h1 class="title">这是首页</h1>           </ion-header-bar>           <ion-content>               <ion-list>                   <ion-item ng-repeat="item in furit">                       Hello,{{item}}!                   </ion-item>               </ion-list>           </ion-content>       </ion-side-menu-content>       <!--左侧菜单-->       <ion-side-menu side="left">           <ion-header-bar align-title="left" class="bar-light">               <h1 class="title">个人中心</h1>           </ion-header-bar>       <ion-content>           <ion-list>               <ion-item ng-repeat="item in settings">                   Hello, {{item}}!               </ion-item>           </ion-list>       </ion-content>   </ion-side-menu>       <!--右侧栏-->       <ion-side-menu side="right">           <ion-header-bar align-title="right" calss="bar-light">               <h1 calss="title">自我能力</h1>           </ion-header-bar>           <ion-content>               <ion-list>                   <ion-item ng-repeat="item in report">                       Hello,{{item}}                   </ion-item>               </ion-list>           </ion-content>       </ion-side-menu>       </ion-side-menus></body></html>
阅读全文
0 0