كيفية إخفاء علامات التبويب في الأيوني

تشاركك هذه المقالة في طريقة علامات تبويب الاختباء الأيونية للرجوع إليها. المحتوى المحدد كما يلي

1.

 <ion-tabs ng-class = "{'tabs-item-hide': $ root.hidetabs}"> <!-tabs-> </ion-tabs>

2.

أضف.

 var module = Angular.Module ('app.directives' ، []) ؛ module.directive ('showtabs' ، function ($ rootscope) {return {restrict: 'a' ، link: function ($ scope ، $ el) {$ rootscope.hidetabs = false ؛} ؛} ؛ تقييد: 'a' ، الرابط: وظيفة ($ scope ، $ el) {$ rootscope.hidetabs = true ؛

3.

مرجع الاختباء في صفحة HTML

 <ion-view Hide-tabs> <!-عرض المحتوى-> </ion-tabs>

4.

عندما تعود الصفحة إلى الصفحة الرئيسية ، يجب عرض علامات التبويب مرة أخرى ، وتحتاج إلى إضافتها إلى وحدة التحكم (بشكل أساسي لحل مشكلة علامات التبويب أو المخفية على Android):

 $ scope. $ on ('$ ionicview.enter' ، function () {// show tabs $ rootscope.hidetabs = false ؛}) ؛

5.

أنا أستخدم Tabs-Top ، ومشكلة أخرى واجهتها هي: جزء من محتوى <ion-content> سيتم إخفاءه ؛ حل:

قم بتعديل المحتوى في التوجيه. js مرة أخرى ولم يعد يستخدم showtabs:

 .directive ('Hidetabs' ، function ($ rootscope) {return {restrict: 'a' ، link: function (scope ، element ، entributes) {scope. $ on ('$ ionicview.beforenter' ، function () {scope. $ watch. Scope. $ ON ('$ ionicview.beforeleave' ، function () {$ rootscope.hidetabs = false ؛}) ؛

دعنا نلخص. بالمقارنة مع استخدام علامات التبويب ، إذا كانت في الأسفل ، فلن تواجه المشكلات الكبيرة أعلاه. ولكن إذا تم استخدامه في الأعلى ، فسوف يواجه بعض المشكلات عندما يتعلق الأمر بالمحتوى.

في الواقع ، يمكنك التفكير في استخدام <ion-slide> على الأيوني بدلاً من <ion-tabs>. سواء كان هذا هو التأثير المنزلق مع الصفحات الأخرى أو التأثير المنزلق لصفحات الشرائح ، فسيتم تحسينه بشكل كبير ، خاصة على Android.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.