<!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. Linux相关TCP参数优化: proc/sys/net/ipv4/ 提高web质量

    tcp_wmem(3个INTEGER变量): min, default, max min:为TCP socket预留用于发送缓冲的内存最小值.每个tcp socket都可以在建议以后都可以使用它.默认 ...

  2. 《SaltStack技术入门与实践》—— Renderer组件

    Renderer组件 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 前面我们已经提过使用Python语言编写state.sls文件.在SaltSta ...

  3. linux运维、架构之路-Kubernetes本地镜像仓库+dashboard部署

    一.部署docker registry            生产环境中我们一般通过搭建本地的私有镜像仓库(docker registry)来拉取镜像. 1.拉取registry镜像 [root@k8 ...

  4. Histograms of Sparse Codes for Object Detection用于目标检测的稀疏码直方图

    AbstractObject detection has seen huge progress in recent years, much thanks to the heavily-engineer ...

  5. <知识整理>2019清北学堂提高储备D2

    简单数据结构: 一.二叉搜索树 1.前置技能: n/1+n/2+……+n/n=O(n log n)  (本天复杂度常涉及) 2.入门题引入: N<=100000. 这里多了一个删除的操作,因此要 ...

  6. [BZOJ3527][ZJOI2014]力：FFT

    分析 整理得下式: \[E_i=\sum_{j<i}{\frac{q_i}{(i-j)^2}}-\sum_{j>i}{\frac{q_i}{(i-j)^2}}\] 假设\(n=5\),考虑 ...

  7. SpringBoot学习-第一章

    1.SpringBoot入门 开发环境:JDK1.8 开发工具:IDEA2017.3.1 1.简介: Spring Boot让我们的Spring应用变的更轻量化.比如:你可以仅仅依靠一个Java类来运 ...

  8. Java称霸编程语言排行榜

    笔者精挑细选了本周研发频道的热门看点,供您在这个周末阅读欣赏.内容涵盖TIOBE编程语言8月份排行榜.开源挑战.WebGL演示.HTML5在线工具.IT职业身涯的14个建议,还有即将举行的SDCC(中 ...

  9. find查找多种文件后缀

    find命令最常用的是查找某个文件,如: find ./ -name "test.txt" 则会在当前目录及子目录下查找test.txt文件 更常用的是查找某一类型的文件,如: f ...

  10. 13-1 jquery操作cookie

    jQuery之cookie操作 Cookies 定义:让网站服务器把少量数据存储到客户端的硬盘或内存,从客户端的硬盘里读取数据的一种技术; 下载与引入:jquery.cookie.js基于jquery ...