<!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. 密码技术之密钥、随机数、PGP、SSL/TLS

    第三部分:密码技术之密钥.随机数.PGP.SSL/TLS 密码的本质就是将较长的消息变成较短的秘密消息——密钥. 一.密钥 什么是密钥? (1)密钥就是一个巨大的数字,然而密钥数字本身的大小不重要,重 ...

  2. 前端面试题常考&必考之--跨域的解决办法

    1.为啥出现跨域??? 在制定Html规则时,为了安全的考虑,一个源的脚本(网页,网站)不能与另一个源的资源进行交互, 所以就引发一个词叫做“同源策略”. 同源策略:同源策略是一种约定,它是浏览器最核 ...

  3. Flink Batch SQL 1.10 实践

    Flink作为流批统一的计算框架,在1.10中完成了大量batch相关的增强与改进.1.10可以说是第一个成熟的生产可用的Flink Batch SQL版本,它一扫之前Dataset的羸弱,从功能和性 ...

  4. mybatis config 快速生成xml DAO

    0.加jar包 1.a.BAT java -jar E:\GZH\Mybaits\mybatis-generator-core-1.3.2\lib\mybatis-generator-core-1.3 ...

  5. B/S大文件下载+断点续传

    1.先将 webuploader-0.1.5.zip 这个文件下载下来:https://github.com/fex-team/webuploader/releases  根据个人的需求放置自己需要的 ...

  6. luogu P1125 笨小猴 x

    P1125 笨小猴 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设max ...

  7. CG-CTF | I wanna play CTF

    这题跟bugku上的come_game超级像,于是菜狗决定研究一下,先鸣谢一下好友the fool,菜狗一直卡在开始界面哇,谢谢大佬给的第一关的数据 这是过到关卡1的数据,经过一系列的尝试得到结论: ...

  8. WWDC2017-advanced_animations_with_uikit

    最后修改时间: 2017-12-1 官方视频链接 这个Session主要讲一下的几个内容: Basic(基础的): 动画工作原理 以及 动画如何计时 Interactive and Interrupt ...

  9. [CSP-S模拟测试]:ants（回滚莫队）

    题目描述 然而贪玩的$dirty$又开始了他的第三个游戏. $dirty$抓来了$n$只蚂蚁,并且赋予每只蚂蚁不同的编号,编号从$1$到$n$.最开始,它们按某个顺序排成一列.现在$dirty$想要进 ...

  10. Java语言支持的变量类型有哪几种

    Java语言支持的变量类型有: 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量. 实例: publi ...