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

概述Ionic是一款流行的移动端开发框架，但是刚入门的同学会发现，Ionic在iOS和Android的底部tabs显示不一样。在安卓情况下底部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 >    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">      <ion-vIEw>        <ion-header-bar >          <h1 >主页</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->      <ion-vIEw>        <ion-header-bar >          <h1 >第二页</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 >          <h1 >第三页</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文件，如果字体乱码看可有标签。其他问题欢迎留言！

总结

以上是内存溢出为你收集整理的关注Ionic底部导航按钮tabs在android情况下浮在上面的处理全部内容，希望文章能够帮你解决关注Ionic底部导航按钮tabs在android情况下浮在上面的处理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1147464.html

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

发表评论

评论列表（0条）