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滚动;

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...