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

前端之家收集整理的这篇文章主要介绍了ionic实现可滑动的tab选项卡切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

先来张效果图:

用到的css代码:

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

Box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="false" show-pager="false">

对应的controller.js代码

BoxDelegate.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的:

注意点:

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

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

原文链接:https://www.f2er.com/js/46268.html

猜你在找的JavaScript相关文章