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为iframe的body添加click事件的实现代码
Apr 07 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
Windows下的PHP5.0详解
2006/11/18 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python中lambda与def用法对比实例分析
2015/04/30 Python
在Django中创建动态视图的教程
2015/07/15 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python读写锁实现实现代码解析
2020/11/28 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
临床护理求职信
2014/04/26 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
PL350与SW11的比较
2021/04/22 无线电
pandas中对文本类型数据的处理小结
2021/11/01 Python