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. NYOJ--45--棋盘覆盖(大数)

    棋盘覆盖 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的 ...

  2. SqQueue(环状队列(顺序表结构))

    template<typename ElemType> class SqQueue { protected: int count; int front,rear; int maxSize; ...

  3. [NOIP2015] 斗地主 大爆搜

    考试的时候想了半天,实在是想不到解决的办法,感觉只能暴力..然后暴力也懒得打了,小数据模拟骗30分hhh 然而正解真的是暴力..大爆搜.. 然后我的内心拒绝改这道题(TAT) 不过在wcx大佬的帮助下 ...

  4. IE10 特有 MSGesture() 方法

    gesturechange方法 是 ie10以上特有的方法. 初始化:oMsg = new MSGesture(); 主要功能和方法: 用于IE下浏览器的DOM元素触发事件 包括 : MSGestur ...

  5. 压缩感知中的数学知识:稀疏、范数、符号arg min

    转自:http://blog.csdn.net/jbb0523/article/details/40262629 1.稀疏:什么是K稀疏呢? 在压缩感知里经常提到 "K稀疏" 的概 ...

  6. Navicat查询哪些表有指定字段名

    通常需要查询某个字段来自于哪张表,在navicat中没有直接查哪些表有指定字段名的功能,只能用sql来查. 1.(按字段名查表)查询哪些表有指定字段名(比如查字段名article_id)的SQL: S ...

  7. MYSQL创建数据库时候直接指定编码和排序规则

    安装我 在网上搜索的结果执行 代码: sudo gedit /etc/mysql/my.cnf 设置了默认编码为 UTF8 代码: [client]port            = 3306sock ...

  8. jstack jstat 简易使用教程

    jstack – 用来查看堆栈信息 jstat – 用来查看JVM相关信息 jstack用法 找到CPU使用最高的进程:top命令,然后按P,CPU使用率排序,就可以看到对应的pid 先说一种暴力的方 ...

  9. git 生成公钥、私钥方法与clone使用方法

    我的配置流程 Git配置 Git安装完之后,需做git配置.打开git bash,分别执行以下两句命令 git config --global user.name "用户名" gi ...

  10. 网友RHCE认证考试经历

    2014年7月,为大力推广RedHat Enterprise Linux7操作系统,红帽将基RHCE认证由RHEL6转换到RHEL7上. 面对新的软件功能.新认证课程内容,初期认证学员的考试通过率一直 ...