ionic侧边栏

来源：互联网发布：怎么做白羊座红颜知已编辑：程序博客网时间：2024/06/05 22:53

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../../ionic/css/ionic.css" /><script type="text/javascript" src="../../ionic/js/ionic.bundle.min.js"></script><script>var app = angular.module("myApp", ['ionic']);app.controller("myCtrl", function($scope) {$scope.user = ["张三","李四","王五"];$scope.settings = ["我的菜单","我的关注","我的粉丝","我的收藏"];});</script></head><body ng-app="myApp" ng-controller="myCtrl"><ion-side-menus><!-- 中间内容 --><ion-side-menu-content><ion-header-bar align-title="left" class="bar-positive"><h1 class="title">这是首页</h1></ion-header-bar><ion-content><ion-list>    <ion-item ng-repeat="item in user">        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-side-menu></ion-side-menus></body></html>

阅读全文

0 0