移动端滑动切换
2016-11-30 本文已影响394人
老苗
预览
scss样式
@import 'common';//初始样式，可以不需要(这是我项目需要)
/*body默认铺满整个屏幕*/
body{
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#nav{
height: 2.8125rem;
background-color: white;
color: $gray;
@include flex(center, center);
.sub-item{
text-align: center;
-webkit-flex: 1;
flex: 1;
line-height: 2.8125rem;
width: 100%;
height: 100%;
border-bottom: none;
}
}
.selected{
border-bottom: 0.0625rem solid $textcolor!important;
color: $textcolor!important;
}
#main{
min-height: 100%;
}
html
额外了解: swiper插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>投资计划</title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/investplan.css">
</head>
<body>
<nav class="text-title1" id="nav">
<div class="sub-item selected" data-type="new-peo" data-num="0">回款中</div>
<div class="sub-item" data-type="earning" data-num="1">已回款</div>
</nav>
<div class="swiper-container" id="main">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
</div>
<div class="swiper-slide">
2
</div>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/classify.js"></script>
</body>
</html>
classify.js自定义的js
$(function(){
/*滑动切换*/
var swiper = new Swiper('.swiper-container', {
onSlideNextStart: function(swiper){
$('.selected').next().addClass('selected');
$('.selected').first().removeClass('selected');
},
onSlidePrevStart: function(swiper){
$('.selected').prev().addClass('selected');
$('.selected').last().removeClass('selected');
}
});
/*点击菜单切换*/
$('#nav .sub-item').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
var num = $(this).data('num');
swiper.slideTo(num, 500, false);
});
});
