<!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. 【UOJ#349】[WC2018] 即时战略

    题目链接 题意 一开始已知一号点. 每次可以选定一个已知点和一个未知点,然后交互库会返回从已知点出发到达未知点路径上的第二个点. 要求在有限步之内知道每一个点. 次数要求: 链的情况要求 \(O(n) ...

  2. Kibana后台进程启动和关闭

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/12073202.html 后台启动Kibana ./bin/kibana & 查找Kibana进 ...

  3. LeetCode--015--三数之和(python)

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 先对nums进行排序,再用双指针,L ...

  4. PHP 大文件上传进度条实现

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  5. PG_CONFIG-NOTFOUND

  6. [CSP-S模拟测试]:毛三琛（随机化+二分答案）

    题目传送门(内部题69) 输入格式 第一行正整数$n,P,k$.第二行$n$个自然数$a_i$.$(0\leqslant a_i<P)$. 输出格式 仅一个数表示最重的背包的质量. 样例 样例输 ...

  7. 微信小程序之登录用户不是该小程序的开发者

    当uniapp项目转为小程序项目的时候,预览会显示“您不是登录用户...”,所以没有办法发布,这个时候打开“project.config.json”设置一下appid,与你公众号appid一致就可以

  8. Java数据结构与算法(4):二叉查找树

    一.二叉查找树定义 二叉树每个节点都不能有多于两个的儿子.二叉查找树是特殊的二叉树,对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 二叉查找树节点的 ...

  9. React-Native 之 GD （十二）海淘半小时热门 及 获取最新数据个数功能 （角标）

    1.海淘半小时热门   基本功能和首页相似 GDHt.js /** * 海淘折扣 */ import React, { Component } from 'react'; import { Style ...

  10. node.js安装和配置(windows系统)

    node.js安装和配置(windows系统) node javasript vscode  node是javascript的管理工具,所以开发javasript项目都要下载安装和配置node. 传送 ...