zoukankan      html  css  js  c++  java
  • Swiper 滑动

    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)
                    }

                })

  • 相关阅读:
    [转] Linux 最大进程数, unable to create new native thread问题
    [转] Maven 从命令行获取项目的版本号
    [转]【JVM】调优笔记2-----JVM在JDK1.8以后的新特性以及VisualVM的安装使用
    DISCUZ 自定义模板
    Linux系统性能统计工具Sar和实时系统性能监控脚本
    shell脚本常规技巧
    Java中文编码小结
    json-smart 使用示例(推荐fastjson)
    HBase Java简单示例
    Ehcache BigMemory: 摆脱GC困扰
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/7286105.html
Copyright © 2011-2022 走看看