移动web Swiper选项卡内容高度自适应

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>swiper.js手机触屏滑动选项卡标签切换代码</title>

<link rel="stylesheet" href="js/swiper/swiper.min.css" />

<style type="text/css">
	*{margin:0;padding:0;font-family: "微软雅黑";}
		.wrap{margin:0 auto;}
		.tabs{height:32px;background: #5AA9F3;width: 100%;padding-top: 8px;text-align: center}
		.tabs .part{display:block;float:left;width:33%;color:#fff;text-align:center;height: 20px;}
		.tabs .part:first-child{border-right: 1px solid #ADDAFD;}
		.tabs a{width:70px;display:block;color:#fff;text-align:center;margin:0 auto;font-size:16px;text-decoration:none;padding-bottom: 2px;}
		.tabs span.active a{color:#fff;border-bottom: 2px solid #fff;}
		.swiper-container{width:100%;border-top:0;}
		.swiper-slide{width:100%;background:#373737;color:#ccc;}
		p{text-align: center;}
</style>

</head>

<body class="bgc_gray">

<div class="pg-main">

	<div id="wrapper">
		<!--header end-->
		<div class="wrap">
			<div class="tabs">
				<span class="part active"><a href="#" hidefocus="true" >全免费</a></span>
				<span class="part" style="border-right: 1px solid #ADDAFD"><a href="#" hidefocus="true">优惠券</a></span>
				<span class="part"><a href="#" hidefocus="true">个人免费</a></span>
			</div>

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-slide-visible swiper-slide-active">
						<div class="content-slide">
							<p>当泪干血隐狂涌白雪纷飞都成空</p>	
							<p>当泪干血隐狂涌白雪纷飞都成空</p>	
							<p>当泪干血隐狂涌白雪纷飞都成空</p>	
							<p>当泪干血隐狂涌白雪纷飞都成空</p>							
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
							<p>当泪干血隐狂涌白雪纷飞都成空</p>	
							<p>当泪干血隐狂涌白雪纷飞都成空</p>	
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
							<p>一场雨把我困在这里</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>
<script type="text/javascript">
	$(function() {

var tabsSwiper;
tabsSwiper = new Swiper('.swiper-container', {
	speed : 500,
	onInit: function(swiper){
		var H = $(".content-slide").eq(tabsSwiper.activeIndex).height();
		$(".swiper-slide").css('height', H + 'px');
		$(".swiper-wrapper").css('height', H + 'px');			
	},
	onSlideChangeStart : function() {
		var H = $(".content-slide").eq(tabsSwiper.activeIndex).height();
		$(".swiper-slide").css('height', H + 'px');
		$(".swiper-wrapper").css('height', H + 'px');
		$(".tabs .active").removeClass('active');
		$(".tabs span").eq(tabsSwiper.activeIndex).addClass('active');
	}
});

$(".tabs span").on('touchstart mousedown', function(e) {
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());

});

$(".tabs span").click(function(e) {
	e.preventDefault();
});


});//end
</script>

</body>
</html>

初始化时获取内容高度

相关文章
相关标签/搜索