基于swiper的Tab选项卡

Sike 发布于2019-08-29 13:11 / 2073人阅读

摘要：根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置

选项卡五花八门，今天又要用到选项卡，首选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

前端小白刚学JS。不足之处，不吝言赐教。谢谢！

五、拓展 经常遇到从另一个页面直接跳转到选项卡对应的内容

例如：page.html 中点击a标签直接跳转到对应展示页面。
我们在href中直接添加锚点，锚点中包含一个数字即对应选项卡的索引值0、1、2

展示 Div+CSS
展示 JavaScript+JQuery
展示 ngularJS+Vue+NodeJs

对上面的案例稍作修改：

在swiperTab.js中添加设定初始化时slide的索引 initialSlide: index

传入参数 index

在回调函数中判断tabSwiper是否存在，否则当哈希值不为0的时候会报错。

function tabs(obj,swiperObj,className,index) {
    var tabSwiper = new Swiper(swiperObj, {
        initialSlide: index, // 设定初始化时slide的索引
        effect : "flip", 
        speed : 500,  
        autoHeight: true,  
        onSlideChangeStart : function() {
            if(tabSwiper){ 
            /*判断tabSwiper是否存在，否则当哈希值不为0的时候会报错 */
                $(obj+"."+className).removeClass(className);  
                $(obj).eq(tabSwiper.activeIndex).addClass(className); 
            }
        }
    });
    $(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(); 
    });
}

在调用的时候根据哈希值(因为我们在a标签的href中添加了锚点)来改变索引值index从而达到改变 swiper初始化时slide的索引的目的

```

完整案例
延伸阅读我的另一篇用本地存储方式从一个页面跳转到用swiper写的全屏滚动页面的指定位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112424.html

基于swiper的Tab选项卡

摘要：根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置选项卡五花八门，今天又要用到选项卡，首选swiper！一、HTML布局根据swiper官网的要求来class命名滑块。 Div+CSS Jav...

Aceyclee 2019-08-21 11:59 评论0 收藏0
基于swiper的Tab选项卡

摘要：根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置选项卡五花八门，今天又要用到选项卡，首选swiper！一、HTML布局根据swiper官网的要求来class命名滑块。 Div+CSS Jav...

imingyu 2019-08-01 17:25 评论0 收藏0
微信小程序之选项卡

摘要：我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡思路之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件...

stormjun 2019-08-23 11:49 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

he_xd 2019-08-02 12:03 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

PascalXie 2019-08-29 17:19 评论0 收藏0