swiper 移动端选项卡_基于swiper的Tab选项卡

最新推荐文章于 2024-07-20 13:20:19 发布

李daxin

最新推荐文章于 2024-07-20 13:20:19 发布

阅读量412

点赞数

文章标签： swiper 移动端选项卡

本文链接：https://blog.csdn.net/weixin_34549315/article/details/112041970

版权

本文介绍了如何使用Swiper库创建移动端选项卡。通过HTML布局、CSS样式设计和JavaScript封装函数`tabs`，实现了选项卡的切换效果。文章详细讲解了每个部分的代码实现，并提供了Js调用示例，帮助读者理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

选项卡五花八门，今天又要用到选项卡，首选swiper！

一、HTML布局

根据swiper官网的要求来class命名滑块。

Div+CSS
JavaScript+JQuery
AngularJS+Vue+NodeJs

千寻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); });```