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をもっとサポートすることを願っています。