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. python 密码学编程

    最近在看一本书.名字是 python密码学编程.在此做一些笔记,同时也为有需要的人提供一些参考. *************************************************** ...

  2. 读取txt文件加DevExpress之进度条progressBarControl

    进度条使用 主要掌握下边几个命令, //水平进度条 progressBarControlH.Properties.Minimum = 0;//1:设置最大数量,比如读取txt文件内容,先要查出行数,然 ...

  3. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  4. Python垃圾回收机制 总结

    Python 垃圾回收机制 内存管理 Python中的内存管理机制的层次结构提供了4层,其中最底层则是C运行的malloc和free接口,往上的三层才是由Python实现并且维护的,第一层则是在第0层 ...

  5. [算法题] Reverse Linked List II

    题目内容 题目来源:LeetCode Reverse a linked list from position m to n. Do it in-place and in one-pass. For e ...

  6. AngularJS优缺点、使用场景

    AngularJS 优缺点 优点: AngularJS模板功能强大丰富,自带了极其丰富的angular指令. AngularJS是完全可扩展的,与其他库的兼容效果很好,每一个功能可以修改或更换,以满足 ...

  7. Webservice 中涉及的几个概念

    开发webservice有一段时间了.但是对其中的协议及实现一直存在疑惑.这里搜集相关概念.用以更好的理解它. 一.什么是Webservice WebService是一种跨编程语言和跨操作系统平台的远 ...

  8. QTextEdit控件使用

    QTextEdit控件使用 QTextEdit *mpContentTextEdit = new QTextEdit(this); //设置占位符文本 mpContentTextEdit->se ...

  9. Linux 日常使用小记

    一.Oracle VirtualBox安装Linux7.0全屏设置 1. 点击菜单栏 设备 –> 分配光驱 –> 选择一个虚拟光盘,找到VirtualBox安装目录下的VBoxGuestA ...

  10. Python 字典和集合

    泛映射类型 collections.abc 模块中有 Mapping 和 MutableMapping 这两个抽象基类,它们的作用是为 dict 和其他类似的类型定义形式接口(在Python 2.6 ...