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. Servlet做简单的ajax增删改查(分页)

    jdbc.java package servlet; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...

  2. Java设计模式学习笔记,二:工厂模式

    工厂模式,主要实现了创建者和调用者的分离. 分类:1.简单工厂模式:2.工厂方法模式:3.抽象工厂模式. 核心:实例化对象时,用工厂方法代替new操作. 一.简单工厂模式 也叫静态工厂模式,工厂类中实 ...

  3. IOS开发之UITabBarController与UINavigationController混合使用

    ios开发中UITabBarController与UINavigationController混合使用是很多app的基础页面结构,下面是简单的的页面初始化的方法,在AppDelegate.m的 - ( ...

  4. Qt实现冒泡提示框

    通过QLabel创建类似冒泡方式的提示框(提示框显示位置为父类控件居中位置,具体可根据需要自行修改),鼠标停留提示框界面时查看信息,离开时自动淡化消失的效果: 头文件定义 #ifndef _TTipW ...

  5. webService接口交互

    1.需要在XXXXX.wsdl中配置相应的类与service方法. 2.启动你的项目,打开浏览器,输入地址:http://localhost:8080/lis/services,就能看到你XXXXX. ...

  6. C#高级编程:泛型优点和特性

    泛型是CLR 2.0的一个新特性,在CLR 1.0中,要创建一个灵活的类或方法,但该类或方法在编译期间不知道使用什么类,就得以Object类为基础.而Object在编译期间没有类型安全性,因此必须进行 ...

  7. 80C51学习 闪烁灯

    //引入头文件 #include <reg52.h> typedef unsigned char u8; typedef unsigned int u16; //位定义 sbit LED= ...

  8. 50个Java多线程面试题(上)

    Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者精通多线程技术并且有丰富的 Java 程序开发.调试.优化经验 ...

  9. 【Js应用实例】限制上传图片大小

    需求:前端页面开发中,常遇到图片上传的需求,一般要求限制图片格式及大小. 说明:这里就把实现此功能所需代码贴出来,供同志们参考,也方便我以后复用. 要点:1.处理 类型type为file的输入元素的v ...

  10. /etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc ~/.bash_logout 说明及区别

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一 ...