Ionicのスライドボックスコンポーネントは、スライド可能なタブを実装するために使用されます。主にタブのクリックとスライドページのスライドイベントを監視し、それに応じてそれらを処理します。 NG-Reepeatループを使用して、コードを最適化および簡素化します。困っている学生は見ることができます。
最初にレンダリングをしましょう：
使用されたCSSコード：
.tab_default {border-bottom：solid 1px＃f2f2f2;パディング：6px 0;}。tab_select {border-bottom：solid 1px＃3e89f5; Box-Shadow：0 -3PX 8PX＃C1D3F0 INSET;}。arrow-top {position：absolute;幅：0;高さ：0;トップ：20px;ボーダー：6pxソリッド＃3e89f5;境界線右色：透明;国境左の色：透明; border-top-color：透明;}。arrow-top：after {content： '';位置：絶対;幅：0;高さ：0;ボーダー：12pxソリッド#fff;右：-12px;下：-13px;境界線右色：透明;国境左の色：透明;ボーダートップカラー：透明;}ページ上のHTMLコード：
<ion-view view-title = "スライディングタブ"> <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" dos-continue = "false" show-pager = "false"> <ion-slide ng-repeat = "p in pages"> <div ng-include = "p"> </ion-content> </ion-view>対応するcontroller.jsコード：
$ scope.tabnames = ['java'、 'html5'、 'android']; $ scope.slectindex = 0; $ scope.activeslide = function（index）{//トリガー$ scope.slectindex = index; $ IONICSLIDEBOXDELEGATE.SLIDE（index）;}; $ scope.slideChanged = function（index）{//トリガー$ scope.slectindex = index;}; $ scope.pages = ["templates/tab01.html"、 "templates/" tab02.html "/html"]tab01.html、tab02.html、tab03.htmlはすべて類似しています。 Tab01を投稿してください：
<div> Page 01 <p style = "margin-top：30px;"> <img src = "img/tab01.jpg"/> </p> </div>
注記：
•クリックするときは、現在のループのインデックス$インデックスを変数SlideIndexに割り当てます。タブでNGクラスを使用して、クリック時にインデックスとSlideIndexが同じかどうかを判断します。同じことが真の場合、対応するタブのスタイルを変更します。
•スライドの場合、スライド変更されたスライドボックスの関数が使用されます。スライドページが変更されると、変数インデックスが変更関数に渡され、現在のスライドのインデックスが識別されます。
•スクロールしてクリックしたくない場合は、オンスライド変更されたリスニングを削除したり、プロパティを追加したり、scroll = "true"を無効にしたり、スライドページのスクロールを禁止したりできます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。