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. Android 开发 微信分享，登陆，获取信息

    1 获取appid和appsecret.        https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN     ...

  2. 题解 SP27102/UVA1747 【Swap Space】

    SP27102 [Swap Space] 双倍经验:UVA1747 Swap Space 用(a,b)表示每个硬盘的原容量和新文件系统下的容量.分两种情况考虑:a≤b和a>b 第一类a≤b格式化 ...

  3. Redis09——事务（悲观锁、乐观锁）

    事务 定义: Redis事务是一个单独的隔离操作 ①事务中所有的命令都会被序列化.按照顺序执行 ②事务在执行过程中不会被其他客户端发送来的命令请求打断 作用: 串联多个命令防止别的命令插队 multi ...

  4. Web API入参，响应规范

    入参绑定 入参应该定义成实体,而不是多个参数,方便扩展.[FromBody]和[FromUrl]特性也最好加上. public ActionResult<Pet> Create([From ...

  5. 题解【2.23考试T2】str

    2. str [题目描述] 这是一道传统题,源代码的文件名为 str.cpp/c/pas. 构造 n 个 01 字符串 S1...Sn,使得对于任意 i≠j,Si 不是 Sj 的前缀.在最小化串长和的 ...

  6. 【Python】数值运算函数

  7. 【做题笔记】洛谷P1036 选数

    作为一个 DFS 初学者这题真的做得很惨...其实窝学 DFS 一年多了,然后一开始就学不会最近被图论和数据结构打自闭后才准备好好学一学233 一开始,直接套框架,于是就有 #include < ...

  8. hadoop学习笔记（八）：hadoop2.x的高可用环境搭建

    本文原创,转载请注明作者及原文链接 高可用集群的搭建: 几个集群的启动顺序问题: 1.先启动zookeeper --->zkServer.sh start 2.启动journalNodes集群  ...

  9. js实现页面下拉后展示导航，以及点击导航自动滑动到相关页面

    //监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...

  10. AVR单片机教程——DAC

    本文隶属于AVR单片机教程系列.   单片机的应用场景时常涉及到模拟信号.我们已经会使用ADC把模拟信号转换成数字信号,本讲中我们要学习使用DAC把数字信号转换成模拟信号.我们还将搭建一个简单的功率放 ...