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

                })

  • 相关阅读:
    xshel链接linuxl安装nginx
    nginx学习笔记
    sweiper做一个tab切换
    bootstrap中tab切换的使用
    pc页面自动缩放到手机端
    日程表
    页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
    mysql5.7版本以上下载安装
    电脑快捷键操作汇总
    关于.eslintrc.js代码检测的一些配置
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/7286105.html
Copyright © 2011-2022 走看看