手机端选项卡切换时手势滑动出现问题

雨天娃娃 · 发表于 2020-4-24 16:43:45

本帖最后由雨天娃娃于 2020-4-24 16:46 编辑

手机端使用纯手写的选项卡切换时，如果切换的两个选项卡中都有swiper，会出现第二个swiper手势滑动错乱的问题
html：
<div class="introduce flexv">
<p class="title_a tc">升级成为联合创始人后</p>
<p class="title_b tc">收益将会大幅提升</p>

<div class="items flex">
<div class="item jus-c on">
<img src="img/point.png" class="n_show"/>
<img src="img/dz.png" class="n_normal hide"/>
<span class="">当前特权</span>
</div>
<div class="item jus-c">
<img src="img/crown.png" class="n_normal" />
<img src="img/hg_on.png" class="n_show hide" />
<span class="">联合创始人特权</span>
</div>
</div>

<div class="introduce_box flex">

<div class="swiper-container introduce_article" id="now_index">
      <div class="swiper-wrapper">
         <div class="swiper-slide flexv">
            <div class="sw_item flex">
<img src="img/yhq.png" class="yhq" />
<div class="sw_item_text flexv">
<span class="title">隐藏优惠券</span>
<span class="note">大额优惠免费领</span>
            </div>
</div>

            <div class="sw_item flex">
<img src="img/yqhy.png" class="invite" />
<div class="sw_item_text flexv">
<span class="title">邀请好友</span>
<span class="note">好友下单享受更多奖励</span>
            </div>
</div>
         </div>
         <div class="swiper-slide flexv">
            <div class="sw_item flex">
<img src="img/ico1.png" class="busy" />
<div class="sw_item_text flexv">
<span class="title">商学院</span>
<span class="note">大咖讲座免费听</span>
            </div>
</div>

            <div class="sw_item flex">
<img src="img/ico2.png" class="teacher" />
<div class="sw_item_text flexv">
<span class="title">专属导师</span>
<span class="note">一对一教你月入百万</span>
            </div>
</div>
         </div>
         <div class="swiper-slide flexv">

            <div class="sw_item flex">
<img src="img/flhd.png" class="flhd" />
<div class="sw_item_text flexv">
<span class="title">福利活动</span>
<span class="note">新人免单天天有，零元购物享不停 </span>
            </div>
</div>
         </div>

      </div>

      
      <div class="swiper-pagination"></div>

</div>


<div class="swiper-containera swiper-container introduce_article hide" id="leader_index">
      <div class="swiper-wrapper">
         <div class="swiper-slide flexv">
            <div class="sw_item flex">
<img src="img/gf.png" class="official" />
<div class="sw_item_text flexv">
<span class="title">官方商品免单权 </span>
<span class="note">新人免单天天有，零元购物享不停 </span>
            </div>
</div>

            <div class="sw_item flex">
<img src="img/yqhy.png" class="train" />
<div class="sw_item_text flexv">
<span class="title">官方培训</span>
<span class="note">专业讲师现场教学</span>
            </div>
</div>
         </div>
         <div class="swiper-slide flexv">
            <div class="sw_item flex">
<img src="img/ico1.png" class="member" />
<div class="sw_item_text flexv">
<span class="title">团队会员</span>
<span class="note">奖金翻倍</span>
            </div>
</div>

            <div class="sw_item flex">
<img src="img/ico2.png" class="visite" />
<div class="sw_item_text flexv">
<span class="title">旅游基金</span>
<span class="note">免费享受团队旅游</span>
            </div>
</div>
         </div>
      </div>

      <div class="swiper-pagination swiper-paginationa"></div>

</div>

</div>

</div>

js：
$(document).ready(function(){
        layui.use(['layer'],function(){
        var layer = layui.layer,carousel = layui.carousel;
        var mySwiper1;

        $('.introduce .item').click(function(){
        $(this).addClass('on')
$(this).siblings().removeClass('on');
if($(this).index() == 0){
$('#now_index').removeClass('hide');
$('#leader_index').addClass('hide');
}else{
$('#leader_index').removeClass('hide');
$('#now_index').addClass('hide');
if(!mySwiper1){
        mySwiper1 = new Swiper('.swiper-containera', {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},//可选选项，自动滑动
     pagination: {
         el: '.swiper-paginationa',
         bulletActiveClass: 'change'
      },
})
}
}

        if($(this).hasClass('on')){
        $(this).find('.n_show').removeClass('hide');
        $(this).find('.n_normal').addClass('hide');
        $(this).siblings().find('.n_show').addClass('hide');
        $(this).siblings().find('.n_normal').removeClass('hide');
        }else{
        $(this).find('.n_show').addClass('hide');
        $(this).find('.n_normal').removeClass('hide');
        $(this).siblings().find('.n_show').addClass('hide');
        $(this).siblings().find('.n_normal').removeClass('hide');
        }
        })
         })

        var mySwiper = new Swiper('.swiper-container', {
autoplay: {
disableOnInteraction: false,
},//可选选项，自动滑动
     pagination: {
         el: '.swiper-pagination',
         bulletActiveClass: 'change'
      },
})
      })

lily_2020 · 发表于 2020-4-29 15:05:37

请问楼主解决了么