Cet article partage avec vous la méthode des onglets de cachette ionique pour votre référence. Le contenu spécifique est le suivant
1 et 1
<ion-tabs ng-class = "{'tabs-item-hide': $ root.hidetabs}"> <! - Tabs -> </ ion-tabs>2
Ajouter. Directif à ce contrôleur:
var module = angular.module ('app.directives', []); module.directive ('showtabs', function ($ rootscope) {return {restrict: 'a', lien: function ($ scope, $ el) {$ rootscope.hidetabs = false;}};}). restreindre: «a», lien: fonction ($ scope, $ el) {$ rootscope.hidetabs = true;}};})3 et 3
Références masqués-tabs dans la page HTML
<ion-View Hide-Tabs> <! - Afficher le contenu -> </ ion-tabs>
4
Lorsque la page revient à la page principale, les onglets doivent être affichés à nouveau et vous devez les ajouter au contrôleur (principalement pour résoudre le problème des onglets ou caché sur Android):
$ scope. $ on ('$ ionicView.enter', function () {// show tabs $ rootscope.hidetabs = false;});5
J'utilise des TABS-TOP, et un autre problème que j'ai rencontré est: une partie du contenu de <ion-content> sera cachée; solution:
Modifiez à nouveau le contenu dans directive.js et n'utilisez plus ShowTabs:
.Directive ('Hidetabs', fonction ($ rootscope) {return {restrict: 'a', lien: function (scope, élément, attributs) {scope. $ on ('$ ionicView.beForenter', function () {scope. $ watch (attributes.hidetabs, fonction (valeur) {$ rootscope.hidetabs = value);};};}; Scope. $ on ('$ ionicView.BeforEleave', function () {$ rootscope.hidetabs = false;});}};})Résumons. Par rapport à l'utilisation des onglets, si elle est en bas, celles ci-dessus n'auront pas de gros problèmes. Mais s'il est utilisé sur le dessus, il rencontrera quelques problèmes en ce qui concerne le contenu.
En fait, vous pouvez envisager d'utiliser <ion-slide> sur ionic au lieu de <ion-tabs>. Qu'il s'agisse de l'effet coulissant avec d'autres pages ou de l'effet coulissant des pages de diapositives, il sera considérablement amélioré, en particulier sur Android.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.