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. ubuntu19.04 配置远程连接ssh

    安装ssh-server sudo apt install openssh-server 参照:https://baijiahao.baidu.com/s?id=1631505486531979316 ...

  2. 每天一个linux命令--ssh的host配置用户名密码

    1.在终端输入 cd ~/.ssh/ vi config 输入服务器的用户名和密码 souche@kickseed:~/.ssh$ cat config # 这是跳板机的配置,给跳板机的 IP 起个别 ...

  3. IntelliJ IDEA 2017.3尚硅谷-----插件的使用

    在 IntelliJ IDEA 的安装讲解中我们其实已经知道,IntelliJ IDEA 本身很多功能也都 是通过插件的方式来实现的.官网插件库:https://plugins.jetbrains.c ...

  4. 第五十四篇 Linux相关——远程连接SSH

        No.1. SSH(Secure Shell)安全外壳协议 建立在应用层基础上的安全协议 可靠,专为远程登录会话和其他网络服务提供安全性的协议 有效防止远程管理过程中的信息泄漏问题 SSH客户 ...

  5. DFT计算过程详解

    DFT计算过程详解 平时工作中,我们在计算傅里叶变换时,通常会直接调用Matlab中的FFT函数,或者是其他编程语言中已经为我们封装好的函数,很少去探究具体的计算过程,本文以一个具体的例子,向你一步一 ...

  6. dubbo学习（一）认识

    部分图片和表述来自dubbo官网 dubbo 概述 背景 这是一个服务端架构发展的路径图 下面我们介绍后面两种,dubbo 正是处于RPC 范畴内的使用. 分布式服务架构 当垂直应用越来越多,应用之间 ...

  7. zabbix_agentd无法启动，cannot open log 错误

    最近有一台服务器的zabbix启动异常,看日志有如下报错 zabbix_agentd []: cannot open log: cannot create semaphore ] No space l ...

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

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

  9. Codeforces 1207C Gas Pipeline （dp）

    题目链接:http://codeforces.com/problemset/problem/1207/C 题目大意是给一条道路修管道,相隔一个单位的管道有两个柱子支撑,管道柱子高度可以是1可以是2,道 ...

  10. sqli-libs（54-65关）

    Less_54 Less-54:使用’’包裹 对输入的次数做了限制,必须在10次请求之内获取信息,否则会刷新表名 输入:?Id=1’ order by 3--+   查看有多少列: 输入 ?id=-1 ...