Swiper中文论坛

标题: 求助 tab切换下嵌套swiper垂直向上循环滚动，滚动一圈的问题 [打印本页]

作者: 小姨家错对门 时间: 2020-6-17 14:25
标题: 求助 tab切换下嵌套swiper垂直向上循环滚动，滚动一圈的问题
在tab切换下嵌套swiper垂直向上循环滚动，到第3个视觉上感觉滚动了一圈，是怎么回事呢，并且不知道怎么描述查找这个问题，有人遇到么？求大神指点，不胜感激！
以下是html里的dom
<div class="score_res">
 
 <a class="score_tit1 on" href="javascript:;" title="最新晒分">最新晒分</a>
 <a class="score_tit2" href="javascript:;" title="最高晒分">最高晒分</a>
 
 <div class="score_res_list" style="display:block;">
 <ul class="clearfix">
 <li class="tab_tit">
 姓名
 学段
 学科
 地区
 分数
 </li>
 </ul>
 <div class="swiper-container scroll">
 <ul class="swiper-wrapper clearfix">
 <li class="swiper-slide">
 张三三
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 李四
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 谭某某
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 王五
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 赵六
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 周七
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 郑八
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 孙九
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 何十
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 金十一
 中学
 数学
 河北
 100
 </li>
 </ul>
 </div>
 </div>
 <div class="score_res_list">
 <ul class="clearfix">
 <li class="tab_tit">
 姓名
 学段
 学科
 地区
 分数
 </li>
 </ul>
 <div class="swiper-container scroll">
 <ul class="swiper-wrapper clearfix">
 <li class="swiper-slide">
 张三三1
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 李四
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 谭某某
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 王五
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 赵六
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 周七
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 郑八
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 孙九
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 何十
 中学
 数学
 河北
 100
 </li>
 <li class="swiper-slide">
 金十一
 中学
 数学
 河北
 100
 </li>
 </ul>
 </div>
 </div>
 </div>
以下是jQ

$(function(){
swiperAction();
$('.score_tit').on('click','a',function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $('.score_tit a').index(this);
$('.score_res_list').stop(false,true).hide().eq(index).stop(false,true).show();
swiperAction();
})
$('.scroll').each(function(){
$(this).find('li

dd').addClass('odd');
})
})
function swiperAction(){
  var mySwiper = new Swiper ('.swiper-container', {
slidesPerView :5,
slidesPerGroup : 1,
speed:300,
autoplay : {
   delay:1000
},
loop : true,
direction : 'vertical',
//setWrapperSize :true,
observer:true,  //修改swiper自己或子元素时，自动初始化swiper
observeParents:true //修改swiper的父元素时，自动初始化swiper
  })
}

tab切换后一行一行向上循环滚动，到第3个的时候滚动速度加快，视觉上感觉滚动了一圈才滚动到下一个，到下一遍的时候依然如此，是什么原因造成的，且要怎么解决呢？

作者: 小姨家错对门 时间: 2020-6-17 14:26
字数限制不能发到一起，这是css
.score_res{width: 84%;margin: 0 auto;}
.score_tit{width: 100%;margin-bottom: 24px;}
.score_tit a{display: block;width: 100px;height: 30px;float: left;font:normal 16px/30px 'Microsoft Yahei';color: #89898b;text-align: center;letter-spacing: 1px;background: url(../images/score_res_titbg1.png) center 0 no-repeat;}
.score_tit a.score_tit2{background-image: url(../images/score_res_titbg2.png);}
.score_tit a.on,.score_tit a:hover{background-position: center -30px;color: #fff;}
.score_res_list{width: 100%;display: none;margin-bottom: 30px;}
.score_res_list li{width: 100%;font:normal 16px/46px 'Microsoft Yahei';color: #434759;float: left;height: 46px;}
.score_res_list li.tab_tit{background: #f7fafe;color: #2e76ef;}
.score_res_list li.odd{background: #f7fafe;}
.score_res_list span{float: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;}
.s_name{width: 20%;}
.s_stage{width: 20%;}
.s_subject{width: 20%;}
.s_city{width: 20%;}
.s_score{width: 20%;}
.scroll{height: 230px;overflow: hidden;}

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)