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


Posted in Javascript onApril 15, 2020

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

先来张效果图:

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

用到的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选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
iScroll.js 使用方法参考
May 16 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
ionic实现滑动的三种方式
Aug 27 #Javascript
js select实现省市区联动选择
Apr 17 #Javascript
轻松掌握JavaScript装饰者模式
Aug 27 #Javascript
node.js实现快速截图
Aug 27 #Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 #Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 #Javascript
轻松掌握JavaScript享元模式
Aug 27 #Javascript
You might like
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
director.js实现前端路由使用实例
2015/02/03 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
jQuery事件对象总结
2016/10/17 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
python装饰器decorator介绍
2014/11/21 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
使用python实现rsa算法代码
2016/02/17 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python爬虫实现中英翻译词典
2019/06/25 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
教师自荐书
2013/10/08 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS