码迷,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
迷上了代码!