關注Ionic底部導航按鈕tabs在android情況下浮在上面的處理

2019-12-12 04:17:50

字體：大中小

來源：轉載

供稿：網友

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

目錄結構如下：