ionicはion-tabsを隠して遅延問題を解決する(tabs)
ネット上にはion-tabsを隠すブログがたくさんありますが、大体の方法はangularjsコマンドを追加することです.
しかし,隠蔽時の遅延問題の解決には言及されなかった.
隠し方について説明しますラベルion-tabsに:ng-class="{‘tabs-item-hide’:$root.hideTabs}"を追加し、ソースコードは以下の通り:
2.angularjsのコマンドを追加します.ソースコードは次のとおりです.
3.3隠したいインタフェースラベルion-view式hide-tabs="true"を追加します.ソースコードは次のとおりです.
ion-contentには本当のフルスクリーンはありません.
レビュー要素を使用すると、ion-contentのclassにhas-tabsがあり、has-tabsを削除すれば問題ありません.
実はこの問題を解決するのは簡単です.tabsを隠すときに$scope.$hasTabsプロパティはfalseに設定されています(ここでは、前はくだらない話です...)
$scope.$hasTabs = false;
しかし,隠蔽時の遅延問題の解決には言及されなかった.
隠し方について説明します
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
//tabs
</ion-tabs>
1 2 3 4 5 2.angularjsのコマンドを追加します.ソースコードは次のとおりです.
//app , var app = angular.module("starter",["ionic"])
app.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$on('$ionicView.beforeEnter', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
});
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 3.3隠したいインタフェースラベルion-view式hide-tabs="true"を追加します.ソースコードは次のとおりです.
//
<ion-view hide-tabs="true" view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
p>
ion-content>
ion-view>
以上の3ステップでtabsを隠すことができますが、tabsが正常に隠すことに気づきます.ion-contentには本当のフルスクリーンはありません.
レビュー要素を使用すると、ion-contentのclassにhas-tabsがあり、has-tabsを削除すれば問題ありません.
実はこの問題を解決するのは簡単です.tabsを隠すときに$scope.$hasTabsプロパティはfalseに設定されています(ここでは、前はくだらない話です...)
$scope.$hasTabs = false;