您的位置:首页 > 移动开发 > IOS开发

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

2017-05-03 11:39 609 查看

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

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: