关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
作者：xyphf 发布时间：2023-10-01 05:38:17
标签：ionic,底部导航按钮,tabs
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文件，如果字体乱码看可有标签。其他问题欢迎留言！
来源：http://blog.csdn.net/xyphf/article/details/53735710
0
投稿猜你喜欢
一、前言又见面了哈，今天为大家介绍时钟、钟表的实现方法教程。实现的方法有很多，这里只是提供了一个思路，本着抛砖引玉的心态，希望能和大家共同学- wait()方法表示，放弃当前对资源的占有权，等啊等啊，一直等到有人通知我，我才会运行后面的代码。notify()方法表示，当前的线程已经放
- 最近项目用到了Spring Boot ，但是在控制器返回html视图并渲染参数的时候，存在了疑问。后面考虑用Thymeleaf ，感觉真的不
- 我们先来看下运行效果图Form1.cs代码：using System;using System.Collections.Generic;us
- 本文实例为大家分享了Android实现五子棋小游戏的具体代码，供大家参考，具体内容如下配图：代码：package com.example.f
- 本文实例为大家分享了Java分形绘制山脉模型的具体代码，供大家参考，具体内容如下如何绘制一个山脉构思设计任意选取三个点，选取一个范围和一个比
- 1、直接使用getWindow().getDecorView().getRootView()直接使用getWindow().getDecor
- 最近在公司的功能需求中，需要实现可以签到的日历，签到后在签到过的日期做标志。本功能参考了网上一些大神的日历控件，在此基础上进行修改，已满足本
- 这篇文章主要介绍了Spring boot整合log4j2过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
- import java.util.LinkedList;public class OJ { public OJ() {
- 在自然语言处理（NLP）研究中，NGram是最基本但也是最有用的一种比对方式，这里的N是需要比对的字符串的长度，而今天我介绍的TrieTre
- 本文实例为大家分享了使用PageHelper插件实现Service层分页的具体代码，供大家参考，具体内容如下使用场景：平时分页我们可以直接使
- 1.static静态变量1.静态变量被同一个类的所有对象共享2.static类变量在类加载的时候就生成使用static保存在class实例的
- （1）很多朋友在使用genymotion开发安卓应用程序的时候，会遇见完全正确的安装但是在运行的时候仍然找不到，genymotion上的设备
- CamShift算法全称是“Continuously Adaptive Mean-Shift”（连续的自适应MeanShift算法），是对M
- 大家在进行Android项目开发的时候经常会遇到中文输入和英文输入切换的情况，本篇内容教给大家实现Android下自动识别中英文键盘的功能。
- CyclicBarrier线程同步java.util.concurrent.CyclicBarrier提供了一种多线程彼此等待的同步机制，可
- 本文实例讲述了java中response对象用法。分享给大家供大家参考，具体如下：<jsp:forward>动作元素用于运行时在
- 概念Java中的集合就是一种容器，可以容纳不同种类的数据，这些容纳是建立在未知的基础上。优点1.可以动态保存任意多个对象，使用比较方便。2.
- NotificationManager 是状态栏通知的管理类，负责发通知、清除通知等操作。NotificationManager 是一个系统
