PhoneGap中文网

标题: $ionicConfigProvider-ionic 中默认安装后tap导航在顶部怎么j解决 [打印本页]
作者: admin    时间: 2015-3-14 15:19
标题: $ionicConfigProvider-ionic 中默认安装后tap导航在顶部怎么j解决
ionic 中默认安装后导航在底部解决方案
$ionicConfigProvider, ios and android

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


  1. .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

  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');

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

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

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


  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

  24.   // setup an abstract state for the tabs directive
  25.     .state('tab', {
  26.     url: "/tab",
  27.     abstract: true,
  28.     templateUrl: "templates/tabs.html"
  29.   })

  31.   // Each tab has its own nav history stack:

  33.   .state('tab.dash', {
  34.     url: '/dash',
  35.     views: {
  36.       'tab-dash': {
  37.         templateUrl: 'templates/tab-dash.html',
  38.         controller: 'DashCtrl'
  39.       }
  40.     }
  41.   })

  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.     })

  62.   .state('tab.account', {
  63.     url: '/account',
  64.     views: {
  65.       'tab-account': {
  66.         templateUrl: 'templates/tab-account.html',
  67.         controller: 'AccountCtrl'
  68.       }
  69.     }
  70.   });

  72.   // if none of the above states are matched, use this as the fallback
  73.   $urlRouterProvider.otherwise('/tab/dash');

  75. });
复制代码


作者: helloxdan    时间: 2015-3-17 12:49
楼主怎么找到这段配置的，找很久都没有找到，请赐教。看到你的配置才解决了，感谢啊！
作者: conango    时间: 2015-4-10 09:23
小米note，安卓4.4.4，用了这段配置，依然在顶部。。。
作者: conango    时间: 2015-4-10 09:45
发现问题了，每次build以后，app.js文件又被还原了，这是什么情况？
作者: conango    时间: 2015-4-10 11:03
已经解决，ironic是要修改项目目录下的www文件夹内的内容，不是platform下的，这点与jquerymobile不同，大家要注意！
作者: conango    时间: 2015-4-10 11:09
还有，要把导航弄到下面，必须把第六行改成 $ionicConfigProvider.platform.android.tabs.position('bottom');

吐槽一下楼主，发帖时候应该把修改什么目录的哪个文件，要修改的地方都说清楚，可以让人少走很多弯路啊
作者: cyt1010602131    时间: 2015-5-29 11:52
已经解决，把项目目录下的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');
作者: cyt1010602131    时间: 2015-5-29 11:53
把项目目录下的www文件夹内的内容全部删除才对，发太快没注意看
作者: cjz903    时间: 2015-8-23 16:53
这东西查下文档就知道了啊。。。或者看源码
作者: admin    时间: 2015-8-28 22:00
conango 发表于 2015-4-10 11:09
还有，要把导航弄到下面，必须把第六行改成 $ionicConfigProvider.platform.android.tabs.position('bottom ...

只能说你你没有看代码，直接app.js里面
作者: MAYIXILOU    时间: 2015-10-23 15:57
admin 发表于 2015-8-28 22:00
只能说你你没有看代码，直接app.js里面

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

我自己二了，没事了
作者: sunnyc    时间: 2015-12-28 18:06
楼主~我想问一下，ionic怎么设置默认tab，除了用路由，还有没有其他方法呢，我的tab是用angular循环出来的，所以不能默认选中tab~有没有方法能解决呢？
作者: onlyoneHawk    时间: 2016-1-7 09:31
在Android中，ionic导航栏移到底部后，遮住了上面的内容，怎么解决。

B2YTH}KTUI074JFPGI1@%)Y.png (21.18 KB, 下载次数: 358)

内容底部被遮住

内容底部被遮住
作者: ikaixin    时间: 2016-2-19 09:24
以解决，谢谢楼主。



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2