微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

先来张效果图:

用到的css代码:

rush: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代码

rush:xhtml;"> display:flex;width:100%;">
Box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="false" show-pager="false">

对应的controller.js代码

rush: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","templates/tab03.html"];

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

rush:xhtml;">

注意点:

•点击时候将当前循环的索引$index赋值给变量slideIndex,在tab中使用ng-class判断点击时候的索引和slideIndex是否一样,一样则改变相应的tab的样式; •滑动的时候是用的slide-Box一个函数,on-slide-changed,当slide页面发发生变化的时候,会向改函数传递一个变量index标识当前slide的索引 ; •如果不想滚动只点击,可以去掉on-slide-changed的监听,也可以增加一个属性disable-scroll="true",禁止slide page滚动;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐