admin 发表于 2015-3-14 15:19:26

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

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

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


.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('standard');

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


// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider

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

// Each tab has its own nav history stack:

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
      }
    }
})

.state('tab.chats', {
      url: '/chats',
      views: {
      'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
      }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
      'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
      }
      }
    })

.state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountCtrl'
      }
    }
});

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

});

conango 发表于 2015-4-10 11:03:31

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

helloxdan 发表于 2015-3-17 12:49:48

楼主怎么找到这段配置的，找很久都没有找到，请赐教。看到你的配置才解决了，感谢啊！

conango 发表于 2015-4-10 09:23:09

小米note，安卓4.4.4，用了这段配置，依然在顶部。。。

conango 发表于 2015-4-10 09:45:00

发现问题了，每次build以后，app.js文件又被还原了，这是什么情况？

conango 发表于 2015-4-10 11:09:29

还有，要把导航弄到下面，必须把第六行改成 $ionicConfigProvider.platform.android.tabs.position('bottom');

吐槽一下楼主，发帖时候应该把修改什么目录的哪个文件，要修改的地方都说清楚，可以让人少走很多弯路啊

cyt1010602131 发表于 2015-5-29 11:52:33

已经解决，把项目目录下的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:23

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

cjz903 发表于 2015-8-23 16:53:02

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

admin 发表于 2015-8-28 22:00:32

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

只能说你你没有看代码，直接app.js里面
页: [1] 2
查看完整版本: $ionicConfigProvider-ionic 中默认安装后tap导航在顶部怎么j解决