$ionicConfigProvider-ionic 中默认安装后tap导航在顶部怎么j解决

admin

ionic 中默认安装后导航在底部解决方案
$ionicConfigProvider, ios and android

在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部,如果要改我们可以通过配置$ionicConfigProvider

1. .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
   
2. 
   
3.         $ionicConfigProvider.platform.ios.tabs.style('standard');
   
4.         $ionicConfigProvider.platform.ios.tabs.position('bottom');
   
5.         $ionicConfigProvider.platform.android.tabs.style('standard');
   
6.         $ionicConfigProvider.platform.android.tabs.position('standard');
   
7. 
   
8.         $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
   
9.         $ionicConfigProvider.platform.android.navBar.alignTitle('left');
   
10. 
    
11.         $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
    
12.         $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        
    
13. 
    
14.         $ionicConfigProvider.platform.ios.views.transition('ios');
    
15.         $ionicConfigProvider.platform.android.views.transition('android');
    
16. 
    
17. 
    
18.   // Ionic uses AngularUI Router which uses the concept of states
    
19.   // Learn more here: https://github.com/angular-ui/ui-router
    
20.   // Set up the various states which the app can be in.
    
21.   // Each state's controller can be found in controllers.js
    
22.   $stateProvider
    
23. 
    
24.   // setup an abstract state for the tabs directive
    
25.     .state('tab', {
    
26.     url: "/tab",
    
27.     abstract: true,
    
28.     templateUrl: "templates/tabs.html"
    
29.   })
    
30. 
    
31.   // Each tab has its own nav history stack:
    
32. 
    
33.   .state('tab.dash', {
    
34.     url: '/dash',
    
35.     views: {
    
36.       'tab-dash': {
    
37.         templateUrl: 'templates/tab-dash.html',
    
38.         controller: 'DashCtrl'
    
39.       }
    
40.     }
    
41.   })
    
42. 
    
43.   .state('tab.chats', {
    
44.       url: '/chats',
    
45.       views: {
    
46.         'tab-chats': {
    
47.           templateUrl: 'templates/tab-chats.html',
    
48.           controller: 'ChatsCtrl'
    
49.         }
    
50.       }
    
51.     })
    
52.     .state('tab.chat-detail', {
    
53.       url: '/chats/:chatId',
    
54.       views: {
    
55.         'tab-chats': {
    
56.           templateUrl: 'templates/chat-detail.html',
    
57.           controller: 'ChatDetailCtrl'
    
58.         }
    
59.       }
    
60.     })
    
61. 
    
62.   .state('tab.account', {
    
63.     url: '/account',
    
64.     views: {
    
65.       'tab-account': {
    
66.         templateUrl: 'templates/tab-account.html',
    
67.         controller: 'AccountCtrl'
    
68.       }
    
69.     }
    
70.   });
    
71. 
    
72.   // if none of the above states are matched, use this as the fallback
    
73.   $urlRouterProvider.otherwise('/tab/dash');
    
74. 
    
75. });

复制代码

conango

已经解决，ironic是要修改项目目录下的www文件夹内的内容，不是platform下的，这点与jquerymobile不同，大家要注意！

ikaixin

以解决，谢谢楼主。

onlyoneHawk

在Android中，ionic导航栏移到底部后，遮住了上面的内容，怎么解决。

sunnyc

楼主~我想问一下，ionic怎么设置默认tab，除了用路由，还有没有其他方法呢，我的tab是用angular循环出来的，所以不能默认选中tab~有没有方法能解决呢？

MAYIXILOU

MAYIXILOU 发表于 2015-10-23 15:57
加了这个之后，页面变成空白的，是什么原因？

我自己二了，没事了

MAYIXILOU

admin 发表于 2015-8-28 22:00
只能说你你没有看代码，直接app.js里面

加了这个之后，页面变成空白的，是什么原因？

admin

conango 发表于 2015-4-10 11:09
还有，要把导航弄到下面，必须把第六行改成 $ionicConfigProvider.platform.android.tabs.position('bottom ...

只能说你你没有看代码，直接app.js里面

cjz903

这东西查下文档就知道了啊。。。或者看源码

cyt1010602131

把项目目录下的www文件夹内的内容全部删除才对，发太快没注意看

cyt1010602131

已经解决，把项目目录下的www文件夹内的内容全部修改，然后再platform下->android->assets->www->js->app.js 第24行 新增
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider)
然后方法的首行添加以下内容 :
$ionicConfigProvider.platform.ios.tabs.style('standard');
        $ionicConfigProvider.platform.ios.tabs.position('bottom');
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('bottom');

        $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
        $ionicConfigProvider.platform.android.navBar.alignTitle('left');

        $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
        $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        

        $ionicConfigProvider.platform.ios.views.transition('ios');
        $ionicConfigProvider.platform.android.views.transition('android');