swiper 移动端选项卡_基于swiper的Tab选项卡
选项卡五花八门,今天又要用到选项卡,首选swiper!
一、HTML布局
根据swiper官网的要求来class命名滑块。
- Div+CSS
- JavaScript+JQuery
- AngularJS+Vue+NodeJs
二、CSS样式
随便写写,根据使用场景调整。(PS:推荐一个在线美化工具)
*{margin:0;padding:0}li{list-style:none}.box{margin:50px auto;width:800px}.swiperTab{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.swiperTab li{display:flex;height:48px;border-left:1px solid #dfdfdf;background-color:#ddf8ff;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center}.swiperTab li:first-child{border-left:1px solid transparent}.swiperTab li.active{background-color:#f60;color:#fff}.swiperTab li:nth-child(1).active{background-color:#9acd32}.swiperTab li:nth-child(2).active{background-color:green}.swiperTab li:nth-child(3).active{background-color:pink}.swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}.swiper-slide:nth-child(1){height:200px;background-color:#9acd32}.swiper-slide:nth-child(2){height:300px;background-color:green}.swiper-slide:nth-child(3){height:100px;background-color:pink}
三、Js封装
自己封装的选项卡函数swiperTab.js
/* swiper 选项卡函数 参数说明* obj 必选,导航列表* swiperObj: 必选,HTML元素或者string类型,Swiper容器的css选择器* className: 必选,当前样式的类名* effect:可选,切换效果,默认为'slide',可设置为'fade,cube,coverflow,flip'。* 其他参数参阅官网 http://www.swiper.com.cn* */function tabs(obj,swiperObj,className) { var tabSwiper = new Swiper(swiperObj, { effect : 'flip',//切换效果 speed : 500, //滑动速度,单位ms autoHeight: true, // 高度随内容变化 onSlideChangeStart : function() { $(obj+'.'+className).removeClass(className); /*有当前类名的删除类名,给下一个添加当前类名*/ $(obj).eq(tabSwiper.activeIndex).addClass(className);/*activeIndex是过渡后的slide索引*/ } }); // 模拟点击事件,如果是移入事件,将mousedown 改为 mouseenter $(obj).on('touchstart mousedown', function(e) { e.preventDefault();/*清除默认事件*/ $(obj+'.'+className).removeClass(className); $(this).addClass(className); /*点击当前导航 改变当前样式*/ tabSwiper.slideTo($(this).index());/*滑动到对应的滑块*/ }); $(obj).click(function(e) { e.preventDefault();/*清除默认点击事件*/ });}
四、Js调用
首先引入相关js
if(hash){ value = hash.match(/\d/g).join(''); index = Number(value);/*字符串转换为数字*/ index = parseInt(index)%lens; } $tabList.eq(index).addClass('active'); tabs('.swiperTab > li','.swiper-container','active',index); });```
swiper 移动端选项卡_基于swiper的Tab选项卡相关推荐
- element ui 选项卡切换_基于element-ui实现标签选项卡
特效描述:基于element-ui实现 标签选项卡.基于element-ui实现标签选项卡 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 通用标签页,基于element-ui 1.基 ...
- 基于jQuery实现tab选项卡【js实现页签切换】
任务描述 本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识 为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
- 如何用html实现选项卡切换,Css如何实现tab选项卡切换
Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为[#tab1:target,#tab2:target,#tab3:target{z-index:1;} ...
- tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
- swiper 弹出图片_结合swiper使用图片懒加载
记录下笔记,大神勿喷,可以留下优化建议,谢谢 最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个 ...
- 基于端到端 语音合成_基于语音的电子医疗应用
基于端到端 语音合成 Healthcare has been one of the countless beneficiaries of the revolutionary advances that ...
- zynqpl端时钟_基于ZC706,ZYNQ学习手记(2):用PL端点亮流水灯
--------------------------------------------------分割线----------------------------------------------- ...
- java 服务端渲染_基于vue-ssr服务端渲染入门详解
第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器 ...
- easyui打开新的选项卡_【easyui右键关闭选项卡】easyui关闭选项卡_easyui关闭当前选项卡...
2015-09-09 15:30:24 近来,有些win10系统反映自己的电脑在自动更新驱动程序之后,在桌面上点击右键时,发现菜单栏里多出了NVIDIA面板或者AIT催化剂等选项,看着很不舒服.那么, ...
- qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
最新文章
- ROS建立URDF模型
- python如何小写p转换p_Python进阶---python 中字符串大小写转换
- 【工作感悟】达内java大数据课程
- 有关锁和内存使用的DMV
- 黑客帝国代码雨的实现
- android 5.0设备 外接键盘 输入中文
- 带动画的自定义view——做一个移动的箭头
- 黄宇c语言第三次作业,北京交通大学黄宇黄宇老师C语言第1次作业.doc
- win7临时文件_小甲办公 | 如何在2020年优雅地使用win7
- 生产排程系统_APS生产排程系统应用-缩短产品生产周期
- 前端学习资料网址汇总
- ESlint 自动格式化代码 补缺代码 添加空格
- 手把手搭建SSM框架
- jQuery-fancybox图片预览
- 【Google Play】创建和管理内部测试版本 ( 创建内部测试版本 | 检查并发布内部测试版本 )
- 计算机网络基本知识(一):分类
- valgrind使用整理
- Oracle 表空间(tablespace)
- Android的声音编程--使用OpenSL ES Audio
- plc西门子s300编程 西门子编程1000例
热门文章
- 情人节程序员用HTML网页表白【满天星星音乐背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
- 在 CentOS 上构建无线网络测试环境
- strut2下载文件
- ARPG游戏设计制作随笔
- http下载异常_荏苒项目二:配置(日志,异常,数据库,前端,跨域CORS)
- When Machine Learning Meets Congestion Control: A Survey and Comparison
- 树莓派系统安装和环境配置
- 周跳探测——历元间差分法
- 基于UML的公开招聘教师管理系统建模的研究和设计
- Processing介绍及几个python模式下的案例