تشاركك هذه المقالة في طريقة علامات تبويب الاختباء الأيونية للرجوع إليها. المحتوى المحدد كما يلي
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 أكثر.