<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>swiper和tab相结合</title>

    <link href="http://files.cnblogs.com/files/heyiming/swiper3.3.1.min.css" rel="stylesheet" type="text/css">

    <script src="files/heyiming/jquery-1.8.0.min.js"></script>

    <script src="files.cnblogs.com/files/heyiming/swiper3.3.1.min.js"></script>

<body>

<style type="text/css">

    #swiper-tab .swiper-slide{

        line-height:2 !important;

        color:#666 !important;

        font-size:14px !important;

        background:#eee !important;

    }

    #swiper-tab .active-nav{

        background:red !important;

    }

    /*tabs文字居中*/

    #swiper-tab{

        text-align: center;

    }

    /*给con部分加上一个背景色*/

    #swiper-con{

        background: yellow;

        height:300px;

    }

</style>

<!--swiper-tab区域-->

<div class="swiper-container swiper-container-horizontal" id="swiper-tab" style="width:480px;">

    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-800px, 0px, 0px);">

        <div class="swiper-slide" style="width: 160px;">版块1</div>

        <div class="swiper-slide" style="width: 160px;">版块2</div>

        <div class="swiper-slide" style="width: 160px;">版块3</div>

        <div class="swiper-slide" style="width: 160px;">版块4</div>

        <div class="swiper-slide swiper-slide-prev" style="width: 160px;">版块5</div>

        <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 160px;">版块6</div>

        <div class="swiper-slide swiper-slide-visible swiper-slide-next" style="width: 160px;">版块7</div>

        <div class="swiper-slide active-nav swiper-slide-visible" style="width: 160px;">版块8</div>

    </div>

</div>

<!--swiper-tab区域-->

<!--swiper-con区域-->

<div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;">

    <div class="swiper-wrapper" style="transform: translate3d(-3360px, 0px, 0px); transition-duration: 0ms;">

        <div class="swiper-slide blue-slide" style="width: 480px;">slider1</div>

        <div class="swiper-slide red-slide" style="width: 480px;">slider2</div>

        <div class="swiper-slide orange-slide" style="width: 480px;">slider3</div>

        <div class="swiper-slide blue-slide" style="width: 480px;">slider4</div>

        <div class="swiper-slide red-slide" style="width: 480px;">slider5</div>

        <div class="swiper-slide orange-slide" style="width: 480px;">slider6</div>

        <div class="swiper-slide blue-slide swiper-slide-prev" style="width: 480px;">slider7</div>

        <div class="swiper-slide red-slide swiper-slide-active" style="width: 480px;">slider8</div>

    </div>

</div>

<!--swiper-con区域-->

<script>

    var mySwiper2 = new Swiper('#swiper-tab',{

        watchSlidesProgress : true,//开启这个参数来计算每个slide的progress(进度) 对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，
从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其他情况平分。例：有6个slide，
当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。swiper的progress其实就是wrapper的translate值的百分值，与activeIndex等属性不同，
progress是随着swiper的切换而不停的变化，而不是在某个时间点突变。

        watchSlidesVisibility : true,//如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible'

        slidesPerView : 3,//将tabs块儿平均分成几份

        /*点击了上面的滑块时，下面的内容区也跟着变化  若去掉后，拖动下面上面可继续移动*/

        onTap: function(){

            mySwiper3.slideTo( mySwiper2.clickedIndex)

        }

    })

    var mySwiper3 = new Swiper('#swiper-con',{

        onSlideChangeStart: function(){

            updateNavPosition()

        }

    })

    function updateNavPosition(){

//默认哪一块是被选中的状态

        $('#swiper-tab .active-nav').removeClass('active-nav')

        var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');

        if (!activeNav.hasClass('swiper-slide-visible')) {

            console.log(1);

            if (activeNav.index()>mySwiper2.activeIndex) {

                console.log(2);

                var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1

                mySwiper2.slideTo(activeNav.index()-thumbsPerNav)

            }

            else {

                console.log(3);

                mySwiper2.slideTo(activeNav.index())

            }

        }

    }

</script>

<!--content-->

</body>

</html>

效果图：

swiper和tab相结合的更多相关文章

  1. 关于swiper的tab(选项卡)中设置了autoHeight没有效果解决

    autoHeight属性使用看官网的示例:https://www.swiper.com.cn/api/parameters/294.html swiper的选项卡结构查看:https://www.sw ...

  2. vue-awesome-swiper ---移动端h5 swiper 和 tab 栏选项联动效果实现

    很久之前做小程序时有个类似每日优鲜里储值卡充值界面里的 卡轮播和价格tab栏联动效果,当时觉得新鲜做出来之后也没当回事.直到今天又遇到了一个类似的功能,所以想着总结经验. 实现效果如下图: 图解:点击 ...

  3. swiper仿tab栏切换

    转载  https://developers.weixin.qq.com/community/develop/article/doc/000040a5dc4518005d2842fdf51c13 小程 ...

  4. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  5. 小程序的tab标签实现效果

    swiper制作tab切换 index.html ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <view class="swiper-tab&qu ...

  6. 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）

    这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序tab（swiper）切换

    <- wxml -> <view class="youhui"> <view ' bindtap='toggle'> 未使用 </view ...

随机推荐

  1. SpringCloud学习系列-构建部门微服务消费者Module

    1.新建microservicecloud-consumer-dept-80 2.Pom <project xmlns="http://maven.apache.org/POM/4.0 ...

  2. 【JavaScript】包装类

    包装类 String().Number().Boolean() String() 可以将基本数据类型的字符串转换为String对象 var string = new String("hell ...

  3. HDU 2296 Ring ( Trie图 && DP && DP状态记录)

    题意 : 给出 m 个单词,每一个单词有一个权重,如果一个字符串包含了这些单词,那么意味着这个字符串拥有了其权重,问你构成长度为 n 且权重最大的字符串是什么 ( 若有权重相同的,则输出最短且字典序最 ...

  4. 【PowerOJ1754&网络流24题】负载平衡问题（费用流）

    题意: 思路: [问题分析] 转化为供求平衡问题,用最小费用最大流解决. [建模方法] 首先求出所有仓库存货量平均值,设第i个仓库的盈余量为A[i],A[i] = 第i个仓库原有存货量 - 平均存货量 ...

  5. Software-Defined Networking: A Comprehensive Survey

    文章名称:Software-Defined Networking: A Comprehensive Survey 文章来源:Proceedings of the IEEE ( Volume: 103  ...

  6. #1112-JSP生命周期

    JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于servlet生命周期,区别在于JSP生命周期还包括将JSP文件编译成ser ...

  7. UE4 质心相关

    Add force 始终给质心施加力,即使手动偏移了质心(Center of mass)也不例外. Add force at location local 相对于物体的原始质心位置增加一个偏移值后的位 ...

  8. Java基础之数组类型

    对于Java,前面的一些基础概念不是很想写,看了看还是从数组开始写吧(毕竟数组是第一个引用类型,相对复杂一点),我也是学了JAVA不是很久,目前看完了JAVA的基础视频,还有JAVA疯狂讲义这本书的大 ...

  9. POJ 1380 Equipment Box （暴力枚举）

    Equipment Box 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/B Description There is a la ...

  10. CDQ求子矩阵的和

    Description维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数Q<=10000,W<=20000 ...