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. C++ STL vector详解

    一.解释:  vector(向量):是一种顺序容器,事实上和数组差不多,但它比数组更优越.一般来说数组不能动态拓展,因此在程序运行的时候不是浪费内存,就是造成越界.而vector正好弥补了这个缺陷,它 ...

  2. Struts2漏洞解决

    如果你也正在使用Struts2作为web层框架做开发或者做公司的送检产品,然后被告知有各种各样的Struts2漏洞,那本篇博客值得你花时间来喽上一两眼. 前端时间抽空为公司做了新一代的送检产品,为了方 ...

  3. ORA-01036: 非法的变量名/编号 解决方案

    今天又一次遇到了 ORA-01036: 非法的变量名/编号 的问题,之前在项目中也遇见过这个问题,但是具体怎么解决的忘记了,今天又是遇见了,花了半个小时才解决.我今天遇到的情况是这样的: 存储过程中有 ...

  4. c++ STL 容器——序列

    STL中11个容器类型分别是deque,list,queue,priority_queue,stack,vector,map,multimap,set,multiset,bieset(在比特级处理数据 ...

  5. (5)UIView常见属性

    此时打印的所有子控件会把使用自动布局的控件也打印出来,不准确,所以得去掉这两个选项,再进行打印 使用实例如下: viewWithTag的注意点,当有多个相同的Tag值时,它是先找到第一个Tag值,而不 ...

  6. vue 组件开发

     作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.新建路由:router-->index.js,修改成下面的代码 import Vue from 'vu ...

  7. Java微信公众平台开发之扫码支付模式一

    官方文档点击查看准备工作:已通过微信认证的公众号,必须通过ICP备案域名(否则会报支付失败)借鉴了很多大神的文章,在此先谢过了大体过程:先扫码(还没有确定实际要支付的金额),这个码是商品的二维码,再生 ...

  8. 米扑代理示例(mimvp-proxy-demo)

    米扑代理示例(mimvp-proxy-demo) 米扑代理示例(mimvp-proxy-demo)聚合了多种编程语言使用代理IP,由北京米扑科技有限公司(mimvp.com)原创分享. 米扑代理示例, ...

  9. javascript的词法作用域

    这个概念是js中相当基础也是极为重要的,很多想当然的错误或感觉怪异的问题都是和这个东西有关.所以,本文主要说下这个名词的概念以及讨论下他牵扯出来的有关变量.函数.闭包的问题. 由变量开始谈 习惯性先来 ...

  10. angular学习(六)-- Filter

    2.6 过滤器:Filter 内置过滤器 currency number date json uppercase lowercase orderBy limitTo filter 自定义过滤器