|
|
刚接触ionic，碰到一个问题，想请教下各位。
如上面图片所示，我需要的功能是：
1、下面一排tabs，点击tab1后在上方空白区域显示页1的内容；
2、点击tab2后在上方空白区域显示一排tabs，这排tabs要在顶部，点击tab2后默认选中funcTab1，显示功能页1的内容，此时下面的tabs也要在页面中显示；
3、点击funcTab2，在中间空白区域显示功能页2的内容，此时下面的tabs要同时在页面中显示。
我的代码：
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
- <title></title>
- <link href="lib/ionic/css/ionic.css" rel="stylesheet" />
- <link href="css/style.css" rel="stylesheet" />
- <link href="css/controlStyle.css" rel="stylesheet" />
- <script src="lib/ionic/js/ionic.bundle.min.js"></script>
- <script src="lib/jquery-1.8.2.js"></script>
- <script src="lib/common.js"></script>
- <script src="lib/GridTable.js"></script>
- <!-- cordova script (this will be a 404 during development) -->
- <script src="cordova.js"></script>
- <script src="js/app.js"></script>
- <script src="js/controllers.js"></script>
- <script src="js/services.js"></script>
- <script src="js/utils.js"></script>
- </head>
- <body ng-app="starter">
- <ion-nav-view></ion-nav-view>
- </body>
- </html>
- <ion-tabs class="tabs-icon-top tabs-positive">
- <ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" class="fontsize" href="#/tab/home" >
- <ion-nav-view name="tab-home"></ion-nav-view>
- </ion-tab>
- <ion-tab title="OA" icon-off="ion-ios-monitor-outline" icon-on="ion-ios-monitor" href="#/tab/oa">
- <ion-nav-view name="tab-oa"></ion-nav-view>
- </ion-tab>
- <ion-tab title="查房" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/rounds">
- <ion-nav-view name="tab-rounds"></ion-nav-view>
- </ion-tab>
- <ion-tab title="搜索" icon-off="ion-ios-search" icon-on="ion-ios-search-strong" href="#/tab/search">
- <ion-nav-view name="tab-search"></ion-nav-view>
- </ion-tab>
- <ion-tab title="我" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/me">
- <ion-nav-view name="tab-me"></ion-nav-view>
- </ion-tab>
- </ion-tabs>
- <ion-view>
- <ion-tabs class="tabs-icon-left tabs-positive tabs-top">
- <ion-tab title="诊断" icon-off="ion-ios-glasses-outline" icon-on="ion-ios-glasses" href="#/funcTab/diagnosis">
- <ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
- </ion-tab>
- <ion-tab title="医嘱" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" href="#/funcTab/order">
- <ion-nav-view name="funcTab-order"></ion-nav-view>
- </ion-tab>
- <ion-tab title="检查" icon-off="ion-ios-medkit-outline" icon-on="ion-ios-medkit" href="#/funcTab/check">
- <ion-nav-view name="funcTab-check"></ion-nav-view>
- </ion-tab>
- <ion-tab title="检验" icon-off="ion-ios-flask-outline" icon-on="ion-ios-flask" href="#/funcTab/test">
- <ion-nav-view name="funcTab-test"></ion-nav-view>
- </ion-tab>
- <ion-tab title="用血" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/funcTab/blood">
- <ion-nav-view name="funcTab-blood"></ion-nav-view>
- </ion-tab>
- <ion-tab title="文书" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/funcTab/document">
- <ion-nav-view name="funcTab-document"></ion-nav-view>
- </ion-tab>
- </ion-tabs>
- angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
- .run(function ($ionicPlatform) {
- $ionicPlatform.ready(function () {
- if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
- cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
- }
- if (window.StatusBar) {
- StatusBar.styleLightContent();
- }
- });
- })
- .config(function ($stateProvider, $urlRouterProvider) {
- $stateProvider
- .state('login', {
- url: "/login",
- controller: "LoginCtrl",
- templateUrl: "templates/login.html"
- })
- .state('tab', {
- url: '/tab',
- abstract: true,
- templateUrl: 'templates/tabs.html'
- })
- .state('tab.home', {
- url: '/home',
- views: {
- 'tab-home': {
- templateUrl: 'templates/home.html',
- controller: 'HomeCtrl'
- }
- }
- })
- .state('tab.rounds', {
- url: '/rounds',
- views: {
- 'tab-rounds': {
- templateUrl: 'templates/rounds/funcTabs.html',
- controller: 'RoundsCtrl'
- }
- }
- })
- .state('tab.search', {
- url: '/search',
- views: {
- 'tab-search': {
- templateUrl: 'templates/search.html',
- controller: 'SearchCtrl'
- }
- }
- })
- .state('tab.me', {
- url: '/me',
- views: {
- 'tab-me': {
- templateUrl: 'templates/me/docInfo.html',
- controller: 'MeCtrl'
- }
- }
- })
- .state('funcTab', {
- url: '/funcTab',
- abstract: true,
- templateUrl: 'templates/rounds/funcTabs.html'
- })
- .state('funcTab.diagnosis', {
- url: '/diagnosis',
- views: {
- 'funcTab-diagnosis': {
- templateUrl: 'templates/rounds/tabs/diagnosis.html',
- controller: 'DiagnosisCtrl'
- }
- }
- })
- .state('funcTab.order', {
- url: '/order',
- views: {
- 'funcTab-order': {
- templateUrl: 'templates/rounds/tabs/order.html',
- controller: 'OrderCtrl'
- }
- }
- })
- .state('funcTab.check', {
- url: '/check',
- views: {
- 'funcTab-check': {
- templateUrl: 'templates/rounds/tabs/check.html',
- controller: 'CheckCtrl'
- }
- }
- })
- .state('funcTab.test', {
- url: '/test',
- views: {
- 'funcTab-test': {
- templateUrl: 'templates/rounds/tabs/test.html',
- controller: 'TestCtrl'
- }
- }
- })
- .state('funcTab.blood', {
- url: '/blood',
- views: {
- 'funcTab-blood': {
- templateUrl: 'templates/rounds/tabs/blood.html',
- controller: 'BloodCtrl'
- }
- }
- })
- .state('funcTab.document', {
- url: '/document',
- views: {
- 'funcTab-document': {
- templateUrl: 'templates/rounds/tabs/document.html',
- controller: 'DocumentCtrl'
- }
- }
- });
- $urlRouterProvider.otherwise('/tab/home');
- });
我现在做到了点击tab2显示了上面的一排funcTabs并显示funcTab1的内容页，但是这个时候下面的tabs没有了。
不知道是ionic不支持还是我路由写错了（修改过几次路由，也没能实现）或者是别的什么原因。
望大神们不吝赐教，谢谢。
另外：我把index.html页面的<ion-nav-bar>删掉了，再给funcTabs.html页面的<ion-tabs>加上tabs-top样式后页面上部还是留下了一个ion-nav-bar高度的空白区域，虽然我现在通过自己设定样式解决了这个问题，但是不知道ionic原生能不能解决这个问题，比如通过设置或者添加样式什么的。
|
|
/1 
发表于 2016-2-23 10:54:21
楼主