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

来源：互联网发布：刷客网络兼职可信吗编辑：程序博客网时间：2024/05/19 18:40

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

0 0