1.http://www.swiper.com.cn/download/  下载Swiper.JS  Swiper.CSS

2.引入项目,添加html

<div class="content">
            <div class="swiper-container" id="swiper-container1">
                <div class="swiper-wrapper" id="orderState">
                     <div class="swiper-slide" title="1">审核通过</div>
                    <div class="swiper-slide" title="2">审核未通过</div>
                 </div>
            </div>

</div>

<div class="swiper-container" id="swiper-container2">
                <div class="swiper-wrapper">
              
       <div class="swiper-slide">@*审核通过*@
                        <div id="AuditthroughDt" data-type="1" class="allOrder  yscroll">
                            <div id="ADiv">
                           
                            </div>
                       </div>
                    </div>

      <div class="swiper-slide">@*审核未通过*@
                        <div id="AuditthroughDt" data-type="2" class="allOrder  yscroll">
                            <div id="BDIV">
                       
                            </div>
                       </div>
                    </div>
                         
                
                 </div>
            </div>

3.调用

    //左右滑动
            var mySwiper1 = new Swiper('#swiper-container1', {
                direction: 'horizontal',
                loop: false,
                slidesPerView: 1,//显示几个
                watchSlidesProgress: true,
                watchSlidesVisibility: true,
                onTap: function () {

      //到那个选项卡  
                    mySwiper2.slideTo(mySwiper1.clickedIndex)
                }

            })

Swiper 滑动的更多相关文章

  1. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  2. swiper滑动失效问题

    最近在写移动端的项目,页面有用的是swiper滑动的. 但是会发现在滑动时,不灵活,就是滑动时隐藏的数据会显示,但是不滑动数据又在初始那,隐藏的数据还是看不到. 于是各种排除问题,终于在pc端+移动端 ...

  3. Swiper滑动Html5手机浏览器自适应

    手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = d ...

  4. swiper 滑动插件,小屏单个显示滑动,大屏全部显示

    var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...

  5. Swiper 滑动切换图片(可用于PC端,移动端)

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...

  6. swiper 滑动获取当前第几页下标

  7. swiper、fullPage、hammer几种滑动插件对比

    1.使用hammer,自己实现滑动垂直切换页面 <!DOCTYPE html> <html lang="en"> <head> <titl ...

  8. swiper 实现滑动解锁

    最近项目中有这样一个需求,研究了两种写法一个原生,一个使用框架 原生写法: <!DOCTYPE html> <html> <head> <meta chars ...

  9. espcms列表页ajax获取内容 - 并初始化swiper

    <link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...

随机推荐

  1. golang 之验证码api

    知识一:如何返回一个json数据? 先定义一个结构体ResponseData,2个参数,并返回的是json数据,key就是json后定义的名称 type ResponseData struct { S ...

  2. 解决 apache poi 转换 word(docx) 文件到 html 文件表格没边框的问题

    一.起因 这几天在做电子签章问题,要通过替换docx文件中的占位符生成包含业务数据的合同数据,再转换成html文件,转换成pdf文件.遇到的问题是:通过apache poi转换docx到html时,原 ...

  3. 【原创】IE8升级到IE11控制台报错的解决方案

    公司win7 64位 英文版系统,刚从IE8升级到IE11,在我F12准备调试js的时候,竟然发现控制台报错了!天啦撸,顿时慌了有木有! 网上搜索了半天,解决方案如下: http://www.micr ...

  4. Loadrunner结果分析中连接图没有数据的设置

    场景进行中,或者之后进行结果分析中,连接图表没有数据,取消选择标记选项.

  5. tps 与 事务平均响应时间关系对答

    在网上看到一篇文章,tps 与 事务平均响应时间关系对答.可以帮助能更清楚的了解二者之间的关系. 问者:每秒处理的事务数和事务的平均响应时间 怎么个关系,有关系吗 kaku21:举个例子:一个高速路 ...

  6. <Mastering KVM Virtualization>:第三章 搭建独立的KVM虚拟化

    在第二章,你了解了KVM的内部结构:在本章中,您将了解如何将Linux服务器设置为虚拟化主机.我们正在讨论将KVM用于虚拟化并将libvirt作为虚拟化管理引擎. KVM开启了虚拟化并利用你的服务器或 ...

  7. angularJS实战(一)

    angular实现列表 accessCtrl.js let AccessCtrl = function($scope, AlertService, DialogService, BigDataServ ...

  8. U3D 控件

    1.普通控件 GUI.Label() GUI.Button()等方法添加控件 bool clicked = GUI.Button() 当按钮单击时,返回true string ss = GUI.Tex ...

  9. .Net Core 2.0生态(4):Entity Framework Core 2.0 特性介绍和使用指南

    前言 这是.Net Core 2.0生态生态介绍的最后一篇,EF一直是我喜欢的一个ORM框架,随着版本升级EF也发展到EF6.x,Entity Framework Core是一个支持跨平台的全新版本, ...

  10. 常用的Linux发行版

    Linux发行版百花齐放 [内容摘要] 如今,众多的Linux发行版百花齐放,linux的阵营日益壮大,每一款发行版都拥有一大批用户,开发者自愿为相关项目投入精力.Linux发行版可谓是形形色色,它们 ...