ionic默认样式android和ios差异

ionicframework中android和ios在默认样式上有一些不同的地方，官方文档中都有说明，但是经常会想不起。

一、差异：

1.tab位置，$ionicConfigProvider, tabs.position(value)

Android 默认是顶部(top)，Ios是底部 (bottom)

2.标题android默认靠左边，ios默认居中

navBar.alignTitle(value)

二：解决方案：

1.将Android的tab默认设置是底部显示：

修改app.js文件如下：

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

  //Modify the tabs of android display position! start$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');
  //Modify the tabs of android display position! end



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

});

2.修改Android的title样式居中显示

给指令ion-header-bar设置align-title="center"属性就行了 //设置默认返回按钮的文字

$ionicConfigProvider.backButton.previousTitleText(false).text('返回');
// 设置全局 $http 超时
 $httpProvider.interceptors.push('timeoutHttpIntercept');
// 配置选项卡，让tab在iOS和Android都显示在底部
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.tabs.style('standard');
//让nav标题在iOS和Android上都居中显示
$ionicConfigProvider.navBar.alignTitle('center');

来源： <http://www.cnblogs.com/xiaojun-zxj/p/4871185.html>

ionic默认样式android和ios差异

相关推荐