slick是一款非常强大的轮播组件,所以很多地方都会使用到。
最近项目出现了这种情况,就是在tab页中使用slick组件,因为tab是display属性控制的,当轮播slick在隐藏的tab中是不会显示的,因此就造成了,切换tab到轮播页面的时候轮播组件未正常工作,出现轮播页空白的情况。
这里其实slick api有提供对应的解决方案,那就是refresh()这个方法,我们要做的就是在tab页切换的时候调用一下refresh方法,让轮播组件重新加载一遍。
以下是具体方案:
<style>
.tabSpan{
width: 100px;
height: 100px;
backgorung: #000000;
color: #ffffff;
display: none;
}
.tabSpan:first-child{
display: block;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="tabList">
<div class="tabSpan">
第一个tab页
</div>
<div class="tabSpan">
第二个tab页面
</div>
<div class="tabSpan">
第三个tab页面
// 使用轮播插件
<div class="yourLunbo">
<div>
<img src="../../icon/countryHonor.png">
</div>
<div>
<img src="../../icon/countryHonor.png">
</div>
<div>
<img src="../../icon/countryHonor.png">
</div>
<div>
<img src="../../icon/countryHonor.png">
</div>
</div>
</div>
</div>
<script>
// tab切换
$('li').click(function() {
$('.tabSpan).css('dispaly', 'none');
$('.tabSpan').eq($(this).index()).css('dispaly', 'block');
// 以下是关键,切换tab初始化轮播插件
$('.yourLunbo')[0].slick.refresh()
});
// 轮播初始化
$(".yourLunbo").slick({
dots: false,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
总结:因为初始化的所有tab默认是dispaly:none属性,轮播继承了他的属性,在切换tab后tab页面的display属性更新,但是轮播组件没有更新,所以就导致了显示不出来的结果。所以在切换tab后需要重新刷新slick方法。
$('.youtLunbo')[0].slick.refresh()
以上就是解决tab中slick不能正常显示的解决方案,小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟!