ionic实现可滑动的tab选项卡切换效果

ionic实现可滑动的tab选项卡切换效果

利用ionic的slide-box组件实现可滑动的tab，主要是监听tab点击以及slide页面滑动的事件，做相应的处理，用ng-repeat循环，优化、简略了代码，有需要的同学可以看看。

先来张效果图：

用到的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;

}

.arrow-top {

position: absolute;

width: 0;

height: 0;

top:20px;

border: 6px solid #3E89F5;

border-right-color:transparent;

border-left-color: transparent;

border-top-color: transparent;

}

.arrow-top:after {

content:'';

position:absolute;

width: 0;

height: 0;

border: 12px solid #fff;

right: -12px;

bottom: -13px;

border-right-color:transparent;

border-left-color: transparent;

border-top-color: transparent;

}

页面上html代码：

{{d}}

对应的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.slectIWbYUDindex=index;

};

$scope.pages=["templates/tab01.html","templates/tab02.html","templates/tab03.html"];

tab01.html、tab02.html、tab03.html这几个都是差不多的，贴一个tab01的：

page 01

注意点：

 •点击时候将当前循环的索引$index赋值给变量slideIndex，在tab中使用ng-class判断点击时候的索引和slideIndex是否一样，一样则改变相应的tab的样式；

 •滑动的时候是用的slide-box的一个函数，on-slihttp://de-changed，当slide页面发发生变化的时候，会向改函数传递

一个变量index标识当前slide的索引 ；

•如果不想滚动只点击，可以去掉on-slide-changed的监听，也可以增加一个属性，disable-scroll="true"，禁止slide page滚动；

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。