<!DOCTYPE html> | |
<html ng-app="myApp"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> | |
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> | |
<title>路由-标签切换</title> | |
<script type="text/javascript"> | |
var app = angular.module("myApp", ["ionic"]); | |
app.config(function ($stateProvider, $urlRouterProvider) { | |
$stateProvider.state("home", { | |
url: "/home", | |
views: { | |
"views-home": { | |
templateUrl: "home.html" | |
} | |
} | |
}).state("cart", { | |
url: "/cart", | |
views: { | |
"views-cart": { | |
templateUrl: "cart.html" | |
} | |
} | |
}).state("mine", { | |
url: "/mine", | |
views: { | |
"views-mine": { | |
templateUrl: "mine.html" | |
} | |
} | |
}); | |
}); | |
app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) { | |
$scope.toggleLeft = function () { | |
$ionicSideMenuDelegate.toggleLeft(); | |
}; | |
}); | |
</script> | |
</head> | |
<body ng-controller="myCtrl"> | |
<ion-side-menus> | |
<!-- 中间内容 --> | |
<ion-side-menu-content> | |
<ion-nav-view name="views-home"></ion-nav-view> | |
</ion-side-menu-content> | |
<!-- 左侧菜单 --> | |
<ion-side-menu side="left"> | |
<ion-header-bar class="bar-positive"> | |
<h1 class="title">左侧</h1> | |
<button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button> | |
</ion-header-bar> | |
<ion-content class="has-header"> | |
这是“侧边栏”页面HTML内容 | |
</ion-content> | |
</ion-side-menu> | |
</ion-side-menus> | |
<ion-tabs class="tabs-positive tabs-icon-top"> | |
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home"> | |
</ion-tab> | |
<ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart"> | |
<ion-nav-view name="views-cart"></ion-nav-view> | |
</ion-tab> | |
<ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine"> | |
<ion-nav-view name="views-mine"></ion-nav-view> | |
</ion-tab> | |
</ion-tabs> | |
<script id="home.html" type="text/ng-template"> | |
<ion-header-bar class="bar-positive"> | |
<button class="button button-clear" ng-click="toggleLeft()">左按钮</button> | |
<h1 class="title">首页</h1> | |
</ion-header-bar> | |
<ion-content class="has-header"> | |
这是“首页”页面HTML内容 | |
</ion-content> | |
</script> | |
<script id="cart.html" type="text/ng-template"> | |
<ion-header-bar class="bar-positive"> | |
<h1 class="title">购物车</h1> | |
<button class="button button-clear">右按钮</button> | |
</ion-header-bar> | |
<ion-content class="has-header"> | |
这是“购物车”页面HTML内容 | |
</ion-content> | |
</script> | |
<script id="mine.html" type="text/ng-template"> | |
<ion-header-bar class="bar-positive"> | |
<h1 class="title">我的</h1> | |
<button class="button button-icon ion-ios-more"></button> | |
</ion-header-bar> | |
<ion-content class="has-header"> | |
这是“我的”页面HTML内容 | |
</ion-content> | |
</script> | |
</body> | |
</html> |
简单导航+侧滑模板
最新推荐文章于 2021-06-04 21:26:54 发布