码迷,mamicode.com
首页 > 移动开发 > 详细

ionic默认样式android和ios差异

时间:2015-10-31 00:27:20      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:

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"属性就行了

 

ionic默认样式android和ios差异

标签:

原文地址:http://www.cnblogs.com/peakblog/p/4924676.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!