关于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'); });
相关文章推荐
- Ionic + AngularJS angular-translate 国际化本地化解决方案
- 关于session过期返回主页解决方案之一以及js中的“和'使用问题
- [转]Ionic + AngularJS angular-translate 国际化本地化解决方案
- Angular.js中使用Swiper插件不能滑动的解决方案
- iOS关于使用七牛SDK上传多张图片内存不断增加问题的解决方案
- 关于使用vue.js的模板渲染时出现一瞬间的设置的模板的解决方案
- ionic---关于android和ios蓝牙的使用--以小票打印为例
- 关于angularJS radio的使用
- iOS关于webView交互使用(包含js)
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤(干货)
- 使用js判断当前手机处于哪个平台(安卓/iOS)
- 关于安卓和ios对js Date对象的支持
- 关于在单独的 Js文件中无法使用 <%= %> 的原因及解决方案
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤(干货)(转)
- angularjs/ionic $resource 出现 preflight的解决方案
- 关于ios端与安卓端使用input 限制只能输入数字
- 关于node.js使用formidable多文件上传解决方案
- Cordova+Angularjs+Ionic混合开发入门篇(四)—— 插件的简单使用
- ionic angularjs $Resource 前端和nodejs后台配合的服务