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文件，如果字体乱码看可有标签。其他问题欢迎留言！

关注Ionic底部导航按钮tabs在android情况下浮在上面的处理的更多相关文章

  1. Android Studio中mac上面的安装

    Android Studio中mac上面的安装 学习了:https://blog.csdn.net/xianrenli38/article/details/79347170 http://www.an ...

  2. Android 高仿新浪微博底部导航栏，实现双击首页Tab，页面的ListView滚动、刷新

    现在很多APP,如微信.QQ.微博等等,它们的主页面都无一例外的选择使用底部Tab导航, 通过这种方式,可以很好的把页面层级分化,很好的提高用户体验.相信,很多Android开发者,都使用到过这种经典 ...

  3. android studio - 隐藏编辑器上面的导航条

    菜单栏-“View”-"Navigation Bar"

  4. android studio - 隐藏编辑器上面的竖线

    android studio 的代码编辑器上面默认有一条竖线不知道是干什么用的,很难看.可以用下列方法进行隐藏. 取消选中这个复选框即可.

  5. Android之RadioGroup+ViewPager制作的底部导航栏

    在日常开发中我们常常会用到类似微信或者QQ的底部导航.实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法. 首先创建activity_main.xml布局文件,里面主要由 ...

  6. Flutter入门（三）-底部导航+路由

    * StatefulWidget 如果想改变页面中的数据就要用到StatefulWidget,之前自定义组件继承的StatelessWidget是不能动态修改页面数据的 //自定义有状态组件 clas ...

  7. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  8. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  9. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

随机推荐

  1. python3练习100题——017

    原题链接:http://www.runoob.com/python/python-exercise-example17.html 题目:输入一行字符,分别统计出其中 英文字母.空格.数字和其它字符的个 ...

  2. window环境下获取python安装的路径

    1.cmd + win  打开命令行 2.where python

  3. OpenCV的视频读取

    现在找一个能拍摄视频的设备真是太容易了.结果大家都用视频来代替以前的序列图像.视频可能由两种形式得到,一个是像网络摄像头那样实时视频流,或者由其他设备产生的压缩编码后的视频文件.幸运的是,OpenCV ...

  4. HTML的链接标签

    网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...

  5. Solr与对应Jdk版本的关系

    Solr各版本下载地址:http://archive.apache.org/dist/lucene/solr/ 下载的包里面的CHANGES.txt 有当前版本需要的说明.

  6. js判断有无属性及新添属性

    1.Object 判断有无新属性 obj.hasOwnProperty(propertyName)  //有无指定属性propertyName        Object.keys(obj)      ...

  7. js函数防抖和函数节流

    参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我 ...

  8. Vue的响应式原理---(v-model中的双向绑定原理)

    Vue响应式原理 不要认为数据发生改变,界面跟着更新是理所当然. 具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git 看下图: ...

  9. Android 服务和广播的使用

    Android 服务和广播的使用 服务的使用 创建服务类 创建一个java文件,取名 mService.java,继承Service. public class mService extends Se ...

  10. 【转载】SpringMVC配置文件详解

    转自:https://my.oschina.net/happyBKs/blog/691502 web.xml文件是web应用的部署描述. 在上一节的springMVC示例中 ,idea下的Maven- ...