ionic tabs 和 侧边框
index.html
<ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-energized" > <ion-tab title="主页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home" > <ion-nav-view name="home-nav"> </ion-nav-view> </ion-tab> <ion-tab title="测试" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" ui-sref="massagist.listAll" > <ion-nav-view name="test-nav"></ion-nav-view> </ion-tab> <ion-tab title="订单" icon-on="ion-ios-time" icon-off="ion-ios-time-outline" ui-sref="order" > <ion-nav-view name="order-nav"></ion-nav-view> </ion-tab> <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="my"> <ion-nav-view name="my-nav"></ion-nav-view> </ion-tab> </ion-tabs>
侧边框页:
<ion-view > <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="bar-energized"> <ion-nav-back-button></ion-nav-back-button> <ion-nav-buttons side="right"> <button class="button button-light button-outline button-small " style="border-radius: 50%" menu-toggle="right"> 分类 </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="test-item-nav" animation="slide-right-left"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="right"> <div class="bar bar-header bar-dark"> <h1 class="title" >分类</h1> </div> <ion-content class="has-header "> <div class="list" > <a class="item" menu-close ui-sref="button.default">全部</a> <a class="item" menu-close ui-sref="button.default">搜索</a> <div class="item item-divider"> 服务项目 </div> <a class="item" menu-close ui-sref="button.default">Item One</a> <a class="item" menu-close ui-sref="button.block">Item Two</a> <a class="item" menu-close ui-sref="button.full">Item Three</a> <a class="item" menu-close ui-sref="button.small">Item Four</a> <div class="item item-divider"> 排行榜 </div> <a class="item" menu-close ui-sref="button.large">Order One</a> <a class="item" menu-close ui-sref="button.outline">Order Two</a> <a class="item" menu-close ui-sref="button.clear">Order Three</a> </div> </ion-content> </ion-side-menu> </ion-side-menus> </ion-view>
路由:
angular.module('app') .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('test', { url: '/test', abstract:true, views: { 'test-nav': { templateUrl: 'views/侧边框页.html', controller: 'TestController' } } }).state('test.listAll', { url: '/listAll', views: { 'test-item-nav': { templateUrl: 'views/显示页.html', controller: 'MassagistListController' } } }) ); });