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. Pandas初体验之数据结构——Series和DataFrame

    Pandas是为了解决数据分析任务而创建的,纳入了大量的库和标准数据模型,提供了高效地操作大型数据集所需的工具. 对于Pandas包,在Python中常见的导入方法如下: from pandas im ...

  2. C#中向ListView控件中添加一行数据

    C#中向ListView控件中添加一行数据: ,先声明一个ListViewItem: ListViewItem item = new ListViewItem(); ,添加第一列数据: item.Te ...

  3. 第四篇，JavaScript面试题汇总

    JavaScript是一种属于网络的脚本语言,已经被广泛用于web实用开发,常用来为网页添加各种各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  4. Java基础小知识（一）

     序言:“不积跬步,无以至千里.不积小流,无以成江海.”每一个庞大的知识架构都是由无数个小知识点慢慢积累起来的,没有量变的积累,就没有质变上的飞跃,成功往往离不开积累. 今天就和大家分享一些我在学习J ...

  5. mybatis-plus 错误

    错误:java.lang.NoClassDefFoundError: org/apache/velocity/context/Context 原因: 缺少velocity的依赖 解决方案: <d ...

  6. TCP／IP详解，卷1：协议--第6章 ICMP：Internet控制报文协议

    引言 I C M P经常被认为是 I P层的一个组成部分.它传递差错报文以及其他需要注意的信息. I C M P报文通常被I P层或更高层协议( T C P或U D P)使用.一些I C M P报文把 ...

  7. util之PriorityQueue

    定义: PriorityQueue<Integer> queue = new PriorityQueue<Integer>(); java中的优先队列默认从小到大 //自定义 ...

  8. jar包和war包的介绍和区别（转载）

    来源:https://www.jianshu.com/p/3b5c45e8e5bd 做Java开发,jar包和war包接触的挺多的,有必要对它们做一个深入的了解,特总结整理如下: 1.jar包的介绍 ...

  9. HTML学习（3）基础

    *开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag). *虽然有时候忘记写结束标签有的浏览器也能正常显示内容,但有时候会出现不可预料的结果或错误,所以 ...

  10. MP3 文件格式解析

    目录: 1.mp3 文件简介 2.ID3 tag id3 v2 3.音频帧 要注意的地方 4.参考 5.一个临时解析方法 一.MP3文件简介 MP3(mpeg-1 Ⅲ 或者 mpeg-2 Ⅲ)是一种将 ...