يونيك يحقق تبديل تبويب التبويب انزلاق تأثير التبديل

يتم استخدام مكون Slide-Box of Ionic لتنفيذ علامة تبويب قابلة للانزلاق. يراقب بشكل أساسي نقرات علامة التبويب والشرائح المنزلق ، ويتعامل معها وفقًا لذلك. استخدم حلقات التكرار NG لتحسين الكود وتبسيطه. يمكن للطلاب المحتاجين إلقاء نظرة.

لنأخذ عرضًا أولاً:

رمز CSS المستخدم:

 .tab_default {border-bottom: solid 1px #f2f2f2 ؛ padding: 6px 0 ؛}. tab_select {border-bottom: solid 1px #3e89f5 ؛ box-shadow: 0 -3px 8px #c1d3f0 inset ؛}. العرض: 0 ؛ الارتفاع: 0 ؛ أعلى: 20 بكسل ؛ الحدود: 6px الصلبة #3E89F5 ؛ لون اليمين الحدودي: شفاف ؛ بلون الحدود اليسرى: شفاف. لون الحدود: شفاف ؛}. السهم: بعد {content: '' ؛ الموقف: مطلق ؛ العرض: 0 ؛ الارتفاع: 0 ؛ الحدود: 12 بكسل Solid #FFF ؛ اليمين: -12px ؛ أسفل: -13px ؛ لون اليمين الحدودي: شفاف ؛ بلون الحدود اليسرى: شفاف. لون الحدود: شفاف ؛}

رمز HTML على الصفحة:

 <ion-view view-title = "sliding tab"> <ion-content has-buncing = "false"> <div style = "display: flex ؛ width: 100 ٪ ؛"> <div style = "flex: 1 ؛ text-align: center ؛" ng-repeat = "d in tabNames" ng-click = "activeslide ($ index)" ng-class = "slectindex == $ index؟ 'tab_select': ''"> {d}} <div style = "left: {15+$ index*33}}}}} <ion-slide-box on-slide changed = "slidechanged (index)" active-slide = "slideindex" do-continue = "false" show-pager = "false"> <ion-slide ng-repeat = "p in pages"> <div ng-include = "p" </ion-content> </on-view>

رمز Controller.js المقابل:

 $ scope.tabnames = ['java' ، 'html5' ، 'Android'] ؛ $ scope.slectIndex = 0 ؛ $ scope.activeslide = function (index) {// trigger عند النقر فوق $ scope.slectIndex = index ؛ $ ionicslideboxdelegate.slide (index) ؛} ؛ $ scope.slidechanged = function (index) {// trigger at $ $ scope.slectIndex = index ؛} ؛ $ scope.pages = ["templates/tab01.html" ، "tapplates/tab02html" ، "]

TAB01.HTML ، TAB02.HTML ، TAB03.HTML كلها متشابهة. انشر TAB01:

 <viv> الصفحة 01 <p style = "margin-top: 30px ؛"> <img src = "img/tab01.jpg"/> </p> </viv>

ملحوظة:

• عند النقر ، قم بتعيين فهرس $ $ من الحلقة الحالية إلى slideindex المتغير. استخدم فئة NG في علامة التبويب لتحديد ما إذا كان الفهرس و SlideIndex متماثلان عند النقر. إذا كان الشيء نفسه صحيحًا ، فقم بتغيير نمط علامة التبويب المقابلة ؛

• عند الانزلاق ، يتم استخدام وظيفة من صندوق الشريحة ، على الانزلاق. عندما تتغير صفحة الشريحة ، سيتم تمرير فهرس متغير إلى وظيفة التغيير لتحديد فهرس الشريحة الحالية ؛

• إذا كنت لا ترغب في التمرير والنقر فقط ، فيمكنك إزالة الاستماع المتغير على الانزلاق ، أو إضافة خاصية ، أو تعطيل scroll = "true" ، وحظر التمرير لصفحة الشريحة ؛

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