做了一个选项卡切换页面,一共四个页面,然后不知道为什么页面的最底部会出现相当于一整张页面的空白高度,而且在刷新的时候,空白处还会时不时出现一样的页面,但是检查了,并没有重复的数据。(由于代码过多,这是我大体的页面布局代码)
<div class="tabs">
<a href="#" hidefocus="true" class="active">第一页面</a>
<a href="#" hidefocus="true">第二页面</a>
<a href="#" hidefocus="true">第三页面</a>
<a href="#" hidefocus="true">第四页面</a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-slide">
内容一
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容二
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容三
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
内容四
</div>
</div>
</div>
</div>
<script>
var tabsSwiper = new Swiper('.swiper-container',{
speed:500,
onSlideChangeStart: function(){
$(".tabs .active").removeClass('active');
$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
}
});
$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active');
$(this).addClass('active');
tabsSwiper.swipeTo($(this).index());
});
$(".tabs a").click(function(e){
e.preventDefault();
});
</script>