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代码:
<ion-view view-title="滑动tab"> <ion-content has-bouncing="false"> <div style="display:flex;width:100%;"> <div style="flex:1;text-align: center;" class="tab_default" ng-repeat="d in tabNames" ng-click="activeSlide($index)" ng-class="slectIndex==$index ? 'tab_select' : '' "> {{d}} <div class="arrow-top" style="left:{{15+$index*33}}%" ng-show="slectIndex==$index"></div> </div> </div> <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="false" show-pager="false"> <ion-slide ng-repeat="p in pages"> <div ng-include="p"></div> </ion-slide> </ion-slide-box> </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","templates/tab03.html"];
tab01.html、tab02.html、tab03.html这几个都是差不多的,贴一个tab01的:
<div style="width:100%;text-align: center;padding-top:30px;"> page 01 <p style="margin-top:30px;"> <img src="img/tab01.jpg" style="width:100%;"/> </p> </div>
注意点:
•点击时候将当前循环的索引$index赋值给变量slideIndex,在tab中使用ng-class判断点击时候的索引和slideIndex是否一样,一样则改变相应的tab的样式;
•滑动的时候是用的slide-box的一个函数,on-slide-changed,当slide页面发发生变化的时候,会向改函数传递一个变量index标识当前slide的索引;
•如果不想滚动只点击,可以去掉on-slide-changed的监听,也可以增加一个属性,disable-scroll="true",禁止slide page滚动;
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
bootstrap treeview 扩展addNode方法动态添加子节点的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的树控件,这篇文章主要介绍了bootstrap treeview 扩展addNode方法动态添加子节点的方法,需要的朋友可以参考下2017-11-11在 localStorage 中上传和检索存储图像的示例详解
这篇文章主要介绍了在 localStorage 中上传和检索存储图像,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-06-06javascript一个无懈可击的实例化XMLHttpRequest的方法
由于IE新旧版本以及与其他浏览器在ajax技术上的不同,往往需要对不同的浏览器做不同的处理,除了笨拙的浏览器嗅探技术,大约也就是对象检测技术可用了。2010-10-10iframe的onload在Chrome/Opera中执行两次Bug的解决方法
创建iframe对象,添加load事件, 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。2011-03-03
最新评论