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

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>

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');
});

目录结构如下：

如果没解决，可以查看一下哪里和我不一样，如果图标不显示可以检查一下可有fonts文件，如果字体乱码看可有标签。其他问题欢迎留言！

赞 (0)

相关推荐

  • ionic App 解决android端在真机上tab处于顶部的问题

    ionic App 解决android端在真机上 tab处于顶部的Bug 在app.js 页面中添加以下代码 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $i

  • 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

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

    Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在iOS和Android的底部tabs显示不一样.在安卓情况下底部tabs会浮上去. 如下图展示: 网上也有很多此类的解决方案,但是我觉得说一千道一万都不如给个dome实在,下面附上解决方案的dome,大家可以看看! <!DOCTYPE html> <html ng-app="ionic"> <head> <meta charset="UTF-8">

  • ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

    在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步: 在标签ion-tabs中添加:ng-class="{'tabs-item-hide': $root.hideTabs}",源码如下 <ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}&q

  • android实现简单底部导航栏

    android实现简单底部导航栏

    本文实例为大家分享了android实现底部导航栏的具体代码,供大家参考,具体内容如下 常见的底部导航栏 动态效果 实现步骤 1.底部导航栏样式 我们应该在项目的res文件夹下新建一个menu文件夹,用来装menu布局文件 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"&g

  • Android实现带有指示器的自定义底部导航栏

    今天这篇文章,主要是给大家实现一个自定义的带有指示器的底部导航栏. 先看一下实现的效果吧. 这个自定义控件的使用要注意以下几个方面: 1.没有布局文件及资源文件,只需要一个java文件就可调用 2.可以非常灵活的使用,一句代码就可以添加到项目中 3.暂时只支持4.0以上版本,颜色值使用的是系统自带色值,如需在低版本使用,请自己替换颜色值 4.支持智能适配,可以根据底部按钮的数量,自动的调整布局 5.主内容区域,必须使用Fragment实现,通过附加到Viewpager上实现界面的左右滑动 下面给

  • Android底部导航栏的三种风格实现

    Android底部导航栏的三种风格实现

    一.效果图展示 如果动图没有动的话,也可以看下面这个静态图 以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Google 给我们提供的一个专门用于底部导航的 View,你只需要在新建 Activity 的时候选择 "Bottom Navigation Activity",IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了. 1. 在 xml 中使用 <andr

  • Android带数字或红点的底部导航拦和联网等待加载动画示例

    Android带数字或红点的底部导航拦和联网等待加载动画示例

    Android带数字或红点的底部导航拦和联网等待加载动画 首先展示一下截图效果,下载地址在文章最后 一.Android带红点的底部导航拦 1.首先写底部导航栏的界面view_main_tab.xml. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and

  • 超简单的几行代码搞定Android底部导航栏功能

    超简单的几行代码搞定Android底部导航栏功能

    超简单,几行代码搞定Android底部导航栏-–应项目需求以及小伙伴的留言,新加了两个方法: 设置底部导航栏背景图片 添加底部导航栏选项卡切换监听事件 底部导航栏的实现也不难,就是下边是几个Tab切换,上边一般是一个FrameLayout,然后FrameLayout中切换fragment. 网上有不少关于Android底部导航栏的文章,不过好像都只是关于下边Tab切的,没有实现Tab与fragment的联动,用的时候还要自己手写这部分代码,对我这个比较懒(据说,懒是程序员的一种美德_#)得程序员

  • android SectorMenuView底部导航扇形菜单的实现代码

    android SectorMenuView底部导航扇形菜单的实现代码

    这次分析一个扇形菜单展开的自定义View, 也是我实习期间做的一个印象比较深刻的自定义View, 前后切换了很多种实现思路, 先看看效果展示 效果展示 效果分析 点击圆形的FloatActionBar, 自身旋转一定的角度 菜单像波纹一样扩散开来 显示我们添加的item 实现分析 使用adapter适配器去设置View, 用户可自定义性强, 不过每次使用需要去设置Adapter, 较为繁琐 直接调用ItemView, 将ImageView和TextView写死, 用户操作简单, 但是缺乏可定制性

  • android实现底部导航栏

    底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法比较好用,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

  • Android实现底部导航栏功能（选项卡）

    Android实现底部导航栏功能（选项卡）

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q

随机推荐