您的位置: 首页  >  IT文章  >  ionic tab导航在android 真机测试中 导航在顶部解决方法

ionic tab导航在android 真机测试中 导航在顶部解决方法

分类: IT文章 • 2022-05-12 21:59:33
ionic tab导航在android 真机测试中 导航在顶部解决办法
在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部,如果要改我们可以通过配置$ionicConfigProvider


  1. .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

  3.         $ionicConfigProvider.platform.ios.tabs.style('standard'); 
  4.         $ionicConfigProvider.platform.ios.tabs.position('bottom');
  5.         $ionicConfigProvider.platform.android.tabs.style('standard');
  6.         $ionicConfigProvider.platform.android.tabs.position('bottom');

  8.         $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
  9.         $ionicConfigProvider.platform.android.navBar.alignTitle('center');

  11.         $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
  12.         $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        

  14.         $ionicConfigProvider.platform.ios.views.transition('ios'); 
  15.         $ionicConfigProvider.platform.android.views.transition('android');


  18.   // Ionic uses AngularUI Router which uses the concept of states
  19.   // Learn more here: https://github.com/angular-ui/ui-router
  20.   // Set up the various states which the app can be in.
  21.   // Each state's controller can be found in controllers.js
  22.   $stateProvider

  24.   // setup an abstract state for the tabs directive
  25.     .state('tab', {
  26.     url: "/tab",
  27.     abstract: true,
  28.     templateUrl: "templates/tabs.html"
  29.   })

  31.   // Each tab has its own nav history stack:

  33.   .state('tab.dash', {
  34.     url: '/dash',
  35.     views: {
  36.       'tab-dash': {
  37.         templateUrl: 'templates/tab-dash.html',
  38.         controller: 'DashCtrl'
  39.       }
  40.     }
  41.   })

  43.   .state('tab.chats', {
  44.       url: '/chats',
  45.       views: {
  46.         'tab-chats': {
  47.           templateUrl: 'templates/tab-chats.html',
  48.           controller: 'ChatsCtrl'
  49.         }
  50.       }
  51.     })
  52.     .state('tab.chat-detail', {
  53.       url: '/chats/:chatId',
  54.       views: {
  55.         'tab-chats': {
  56.           templateUrl: 'templates/chat-detail.html',
  57.           controller: 'ChatDetailCtrl'
  58.         }
  59.       }
  60.     })

  62.   .state('tab.account', {
  63.     url: '/account',
  64.     views: {
  65.       'tab-account': {
  66.         templateUrl: 'templates/tab-account.html',
  67.         controller: 'AccountCtrl'
  68.       }
  69.     }
  70.   });

  72.   // if none of the above states are matched, use this as the fallback
  73.   $urlRouterProvider.otherwise('/tab/dash');

  75. });

相关推荐