关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在IOS和android的底部tabs显示不一样。在安卓情况下底部tabs会浮上去。
如下图展示:
网上也有很多此类的解决方案,但是我觉得说一千道一万都不如给个dome实在,下面附上解决方案的dome,大家可以看看!
<!DOCTYPE html>
<html ng-app="ionic"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="js/ionic.bundle.min.js"></script> <script src="js/config.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/ionic.min.css"> </head> <body> <ion-tabs class="tabs-positive tabs-icon-top"> <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">主页</h1> </ion-header-bar> <ion-content> <p>内容区</p> </ion-content> </ion-view> </ion-tab> <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive"> <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">第二页</h1> </ion-header-bar> <ion-content> <p>第二页</p> </ion-content> </ion-view> </ion-tab> <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">第三页</h1> </ion-header-bar> <ion-content> <p>第三页</p> </ion-content> </ion-view> </ion-tab> </ion-tabs> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
config.js
angular.module("ezApp",["ionic"])
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { //Modify the tabs of android display position! start $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'); });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
目录结构如下:
如果没解决,可以查看一下哪里和我不一样,如果图标不显示可以检查一下可有fonts文件,如果字体乱码看可有标签。其他问题欢迎留言!
转载于:https://www.cnblogs.com/quwaner/p/7995335.html
关注Ionic底部导航按钮tabs在android情况下浮在上面的处理相关推荐
- Android Studio中mac上面的安装
Android Studio中mac上面的安装 学习了:https://blog.csdn.net/xianrenli38/article/details/79347170 http://www.an ...
- android底部导航栏选中动画,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样 就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出 第一种方法 简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
- 爱奇艺首页底部导航按钮android,仿爱奇艺/腾讯视频ViewPager导航条实现
仿爱奇艺/腾讯视频ViewPager导航条实现,支持自定义导航条高度,宽度,颜色变化,字体大小变化.支持多种滚动模式,支持自定义每个TabView的样式.项目地址:https://github.com ...
- android 仿360浮动,Android--模仿360底部导航按钮
效果图: 这里写图片描述 如果没有左右2个边界的判断, 其实还是很简单的. 那就不断绘制drawCircle就可以了. 难就难在左右边界这2个特殊的地方. 我这里使用了drawArc的方法,完成左右2 ...
- android开发,3秒学会修改底部导航按钮图标
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
现在很多APP,如微信.QQ.微博等等,它们的主页面都无一例外的选择使用底部Tab导航, 通过这种方式,可以很好的把页面层级分化,很好的提高用户体验.相信,很多Android开发者,都使用到过这种经典 ...
- android解决底部导航栏遮挡问题,Android虚拟导航栏遮挡底部的输入框的解决方法...
1.场景还原 最近忙着app的适配,在这个过程问题中,各种机型的奇葩问题都出来了,适配真尼玛痛苦!今天就oppo机型虚拟导航栏遮挡底部的输入框的问题作个记录. ① 在该Activity的根layout ...
- android底部导航进行跳转,Android实现底部导航菜单的跳转--BottomNavigationView
效果: 项目结构: 需要用到design依赖: 现在是:implementation 'com.android.support:design:28.0.0' 代码: activity_main.xml ...
- android解决底部导航栏遮挡问题,Android虚拟导航栏遮挡底部的输入框的解决方法
.场景还原 最近忙着app的适配,在这个过程问题中,各种机型的奇葩问题都出来了,适配真尼玛痛苦! ① 在该Activity的根layout配置如下属性: android:fitsSystemWindo ...
最新文章
- 叮!你有一份2018英特尔人工智能大会的邀请函,请查收!
- RK3399 Ubuntu修改任务栏为自动隐藏和修改桌面背景
- 截取中文字符长度(中文、字母都有效)
- 第十届蓝桥杯大赛青少年创意编程C++组省赛 第1题 水下探测器
- 用好这个数据分析工具,BI平台建设少费一半力
- 移动安全-iOS(三)
- 谷歌了java集成开发_Spring整合Kaptcha谷歌验证码工具的开发步骤
- Python生态工具、文本处理和系统管理(虚拟)
- IoC框架(依赖注入 DI)
- vs2008+sqlserver2008 同一台服务器webconfig 数据连接串的配置要点
- HTTP文件下载原理
- GPU 共享内存地址映射方式
- 期货开户趋势的本质是惯性
- [Linux]-堡垒机/跳板机作用、登陆异常处理
- 安防海量高清视频无损压缩—四川省智慧公共安全系统案例
- linux 升级root,linux系统内核升级实例
- Efficient multi-keyword ranked query over encrypted data in cloud computing (6)
- 前序遍历,中序遍历,后序遍历详解
- 嵌入式开发--CubeMX使用入门教程
- 进制与IP地址的转换
热门文章
- sql移动加权计算利润_投资收益率、时间加权收益率、资金加权收益率-KlipC讲解三个衡量交易员收益率的计算方式和准确性...
- SQLi LABS Less-31
- XSS漏洞原理/方式/防御
- linux如何查看nginx是否启动
- ionic3使用第三方图标
- 从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)...
- Core Data的使用(二)备
- hdu 2438 Turn the corner [ 三分 ]
- C#泛型委托Predicate、Action、Func
- SGU 201 Non Absorbing DFA (DP)