ionic 实现侧滑小demo
顾烨磊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--设置适配-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="lib/css/ionic.min.css" />
<script src="lib/js/ionic.bundle.min.js"></script>
<script>
angular.module("myApp",['ionic'])
.controller("demoC",["$scope", "$ionicSideMenuDelegate",function($scope, $ionicSideMenuDelegate){
$scope.toOpen=function(){
$ionicSideMenuDelegate.toggleLeft();
};
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="demoC">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar calss="bar-dark">
<button class="button button-icon" ng-click="toOpen()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">我是主内容</h1>
</ion-header-bar>
<ion-content>
<h1>Content</h1>
</ion-content>
</ion-side-menu-content>
<!--侧拉菜单-->
<ion-side-menu side="left">
<ion-header-bar calss="bar-dark">
<h1 class="title">我是侧拉内容</h1>
<div class="content has-header">
<ul class="list">
<li class="item">
Battletoads
</li>
<li class="item">
Contra
</li>
<li class="item">
Duck Tales
</li>
<li class="item">
Mega Man
</li>
<li class="item">
Metroid
</li>
<li class="item">
Mike Tyson's Punch-Out
</li>
<li class="item">
R.C. Pro-Am
</li>
<li class="item">
Spy Hunter
</li>
<li class="item">
Super Mario Bros.
</li>
<li class="item">
The Legend of Zelda
</li>
</ul>
</div>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
类似资料：