关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
作者：xyphf 时间：2023-10-01 05:38:17
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
标签：ionic,底部导航按钮,tabs
0
投稿猜你喜欢
android之listview悬浮topBar效果
2022-12-24 23:29:58
C#实现中英文混合字符串截取的方法
2022-07-11 10:02:35
C#实现Word和ODT文档相互转换详解
2022-12-17 21:36:47
c++ 函数指针相关总结
2022-09-26 04:42:33
SpringBoot项目为何引入大量的starter?如何自定义starter?
2022-12-28 21:39:02
java interface的两个经典用法
2021-08-17 06:20:56
Android Studio的中文乱码问题解决方法
2023-06-05 04:48:14
Java Map简介_动力节点Java学院整理
2023-06-03 20:27:03
Spring零基础入门WebFlux响应式编程
2022-07-12 07:25:53
解析Java程序中对象内存的分配和控制的基本方法
2023-01-07 21:46:10
c# 实现模糊PID控制算法
2022-12-06 13:06:22
java集合Collection常用方法解读
2023-11-16 18:29:07
Java实现定时任务的方法详解
2022-12-30 04:14:00
详解从零开始---用C#制作扫雷游戏
2022-06-14 13:33:12
C#实现生成mac地址与IP地址注册码的两种方法
2022-07-14 20:14:58
深入理解Java对象复制
2021-10-06 05:39:27
springboot中使用redis并且执行调试lua脚本
2022-02-15 08:49:52
Netty实战入门教程之 什么是Netty
2023-10-14 01:08:09
C#使用DevExpress中的XtraCharts控件实现图表
2022-12-21 10:14:10
Android悬浮窗屏蔽悬浮窗外部所有的点击事件的实例代码
2022-11-13 17:09:47