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. adb logcat日志抓取

    adb命令 logcat日志抓取 一.logcat抓log方法:adb logcat命令,可以加条件过滤 1.安装SDK(参考android sdk环境安装) 2.使用数据线链接手机,在手机助手的sd ...

  2. QT5.1+中文乱码问题

    原文连接:https://blog.csdn.net/liyuanbhu/article/details/72596952 QT中规定 QString 的 const char* 构造函数是调用 fr ...

  3. Docker+JMeter单机版+Nginx

    基于JMeter5.1.1+Nginx1.12.2JMeter发起压测  Nginx作为文件服务器 一.目录结构: Dockerfile文件: FROM ubuntu:18.04# 基础镜像 MAIN ...

  4. 7.log4j

    Log4j:日志工厂的一部分(使用起来比较麻烦) 1.要想使用外部类,得先导包 pom.xml <dependency> <groupId>log4j</groupId& ...

  5. Django_模型字段属性

    """ 定义属性 概述 ·django根据属性的类型确定以下信息 ·当前选择的数据库支持字段的类型 ·渲染管理表单时使用的默认html控件 ·在管理站点最低限度的验证 · ...

  6. vue项目接入百度地图

    方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址:https://dafrok.github.io/vue-bai ...

  7. VS2017 + Windows10编译C++ MongoDB驱动

    转载地址:https://blog.csdn.net/sqcfj/article/details/86716831 mongoDB有两个接口库:mongo-c-driver和mongo-cxx-dri ...

  8. RESTful api设计风格

    简介 REST(Representational State Transfer):表象层状态转变   RESTful对api进行规范和约束,使得api统一规范,增强api的可读性,便于开发.   设计 ...

  9. opencv：图像噪声

    常见噪声的类型: 椒盐噪声 高斯噪声 其他噪声...... 手动生成图像噪声: #include <opencv2/opencv.hpp> #include <iostream> ...

  10. hadoop fs -put could only be replicated to 0 nodes, instead of 1 解决方法

    我的坏境是在虚拟机linux操作系统中,启动start-all.sh后 1.执行jps,如下 2.执行hadoop fs -mkdir input 创建成功 执行hadoop fs -ls 可以看到i ...