关于Angular.js和ionic配合使用ios和安卓的tab等不统一的解决方案

最新推荐文章于 2022-07-29 16:55:34 发布

wh_xmy

最新推荐文章于 2022-07-29 16:55:34 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/wh_xmy/article/details/71108527

版权

ios中tab一直处于底部，但是在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 使用的是使用状态概念的AngularUi路由器
  // 了解更多: https://github.com/angular-ui/ui-router
  // 设置应用程序可以使用的各种状态.
  // 每个状态的控制器都可以在controller.js中找到。
  $stateProvider

  // 设置选项卡指令的抽象状态
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  //每个tab都有自己的导航历史堆栈

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

  //如果上述每个状态都不匹配，使用下面的作为回退
  $urlRouterProvider.otherwise('/tab/dash');

});