您的位置:首页> 日志> 动易系统 正文

一般我们的手机版输出,默认是使用Swiper1的来实现滑动等等效果的,但是发现当Tab切换里面带有焦点图切换的时候,就会出错了,就是下面这种情况的时候

解决方法是:换Swiper4

地址:https://www.swiper.com.cn/

Swiper,是目前应用较广泛的移动端网页触摸内容滑动js插件。

Swiper4.x使用方法https://www.swiper.com.cn/usage/index.html

Swiper4.x的全部配置选项、方法、函数:https://www.swiper.com.cn/api/index.html

实现图一的例子:

  1. <div class="tabs">  
  2.    <a class="active">栏目名称</a> 
  3.    <a>栏目名称</a> 
  4.   </div> 
  1. <div id="tabs-container" class="swiper-container"> 
  2.    <div class="swiper-wrapper"> 
  3.  
  4.      <div class="swiper-slide"> 
  5.        <div class="paddingLR"> 
  6.          <div id="focusNews" class="focusNews swiper-container"> 
  7.          焦点图
  8.          </div> 
  9.          <ul class="infoList">图文信息列表</ul>         
  10.        </div> 
  11.      </div> 
  12.     
  13.      <div class="swiper-slide"> 
  14.        <div class="paddingLR"> 
  15.          <div id="focusNews" class="focusNews swiper-container">
  16.           焦点图
  17.          </div> 
  18.          <ul class="infoList">图文信息列表</ul>        
  19.        </div> 
  20.      </div> 
  21.  
  22.    </div> 
  23.  </div> 
  1. <script type="text/javascript"
  2. window.onload = function() { 
  3.     var bannerSwiper = new Swiper('#focusNews', { 
  4.         autoplay: true
  5.         visibilityFullFit: true
  6.         loop: true
  7.         pagination: { 
  8.             el: '#focusNews .pagination'
  9.         } 
  10.     });    
  11.     $(".tabs a").on('click'function(e) { 
  12.         e.preventDefault() 
  13.         $(".tabs .active").removeClass('active'
  14.         $(this).addClass('active'
  15.         tabsSwiper.slideTo($(this).index()) 
  16.     }); 
  17.     var tabsSwiper = new Swiper('#tabs-container', { 
  18.         speed: 500, 
  19.         on: { 
  20.             slideChangeTransitionStart: function() { 
  21.                 $(".tabs .active").removeClass('active'); 
  22.                 $(".tabs a").eq(this.activeIndex).addClass('active'); 
  23.             } 
  24.         } 
  25.     }); 
  26. </script>