手机端选项卡切换时手势滑动出现问题
本帖最后由 雨天娃娃 于 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'
},
})
})
请问楼主解决了么
页:
[1]