zoukankan      html  css  js  c++  java
  • 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');

     



  • 相关阅读:
    《高效能人士的七个习惯》读书笔记
    《精进》读书摘要
    讲述测试自己的故事
    搭建项目自动化框架的搭建、改进与思考
    真是个信息爆炸的世界
    C#中的WebBrowser控件的使用
    C#动态调用webService出现 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系。
    C#抓取网面上的html内容(JS动态生成的无法抓取)
    SQL还原数据库后,数据库显示受限制用户解决方法
    [Microsoft][ODBC 驱动程序管理器] 在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配
  • 原文地址:https://www.cnblogs.com/Full--Stack/p/8041638.html
Copyright © 2011-2022 走看看