ionic侧边栏

最新推荐文章于 2021-04-22 22:12:47 发布

LWT000aa

最新推荐文章于 2021-04-22 22:12:47 发布

阅读量320

点赞数

分类专栏：安卓

本文链接：https://blog.csdn.net/LWT000aa/article/details/78288282

版权

安卓专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>