<!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. java web 增加信息课堂测试00

    按照图片要求设计添加新课程界面.(0.5分)在后台数据库中建立相应的表结构存储课程信息.(0.5分)实现新课程添加的功能.要求判断任课教师为王建民.刘立嘉.刘丹.王辉.杨子光五位教师的其中一位.(0. ...

  2. MongoDB的特殊操作

    相比关系型数据库, Array [1,2,3,4,5] 和 Object { 'name':'DragonFire' } 是MongoDB 比较特殊的类型了 特殊在哪里呢?在他们的操作上又有什么需要注 ...

  3. [原创]PHP代码修正之CodeSniffer

    目录 参考链接 介绍 安装 使用 命令行模式 PHPStorm 让编辑器使用PSR-2标准 集成phpcbf 参考链接 PHP开发规范之使用phpcbf脚本自动修正代码格式 在PhpStorm中使用P ...

  4. 【NOIP2016提高A组8.12】总结

    惨败!!!! 第一题是一道神奇的期望问题. 第二题,发现"如果两个部门可以直接或间接地相互传递消息(即能按照上述方法将信息由X传递到Y,同时能由Y传递到X),我们就可以忽略它们之间的花费&q ...

  5. Mike的农场

    题目 Mike有一个农场,这个农场n个牲畜围栏,现在他想在每个牲畜围栏中养一只动物,每只动物可以是牛或羊,并且每个牲畜围栏中的饲养条件都不同,其中第i个牲畜围栏中的动物长大后,每只牛可以卖a[i]元, ...

  6. 【leetcode】1137. N-th Tribonacci Number

    题目如下: The Tribonacci sequence Tn is defined as follows: T0 = 0, T1 = 1, T2 = 1, and Tn+3 = Tn + Tn+1 ...

  7. 词根——rect

    词根rect:直 线索链 来源于简单词right righta.正确的,直的,右的 (正和直是不分的)n. 右,权利ad.正确地,在右边 rectifyv. 纠正,整顿把它直起来 rect+ify=直 ...

  8. POJ 2112 Optimal Milking ( 经典最大流 && Floyd && 二分 )

    题意 : 有 K 台挤奶机器,每台机器可以接受 M 头牛进行挤奶作业,总共有 C 头奶牛,机器编号为 1~K,奶牛编号为 K+1 ~ K+C ,然后给出奶牛和机器之间的距离矩阵,要求求出使得每头牛都能 ...

  9. 【bzoj3566】 [SHOI2014]概率充电器

    *题目描述: 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器: “采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率充电器,您生活不可 ...

  10. Oracle传输数据到Sqlserver

    通过Sqlserver的SSIS工具实现数据传输