移动端 swiper 做导航栏

最新推荐文章于 2021-12-20 10:15:50 发布

夜惊如水

最新推荐文章于 2021-12-20 10:15:50 发布

阅读量1.2k

点赞数

分类专栏： js代码

本文链接：https://blog.csdn.net/qq_41422208/article/details/89520805

版权

js代码专栏收录该内容

34 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="js/mui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/reset.css" rel="stylesheet"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
	<style>
		.scoll-page {
			background: #fff;
			min-height: 100%;
			margin: 0 auto;
			/* overflow-y: auto; */
		}
		.head{
			line-height: 50px;
			background: #000000;
			color: #FFFFFF;
			text-align: center;
		}
		#nav {
			position: -webkit-sticky;
			position: sticky;
			top:0;
			z-index: 444;
		}
		
		#nav {
			height: 50px;
			line-height: 50px;
		}
		#nav li{
			text-align: center;
		}
		.active{
			color: red;
		}
	</style>
</head>
<body>
	<div class="scoll-page">
		<div class="head">
			标题
		</div>
		<nav id="nav" class="swiper-container">
		    <ul class="swiper-wrapper">
		        <li class="swiper-slide"  class="active">推荐</li>
				<li class="swiper-slide">居家</li>
				<li class="swiper-slide">餐厨</li> 
				<li class="swiper-slide">餐厨</li> 
				<li class="swiper-slide">餐厨</li> 
		    </ul>
		</nav>
		<div style="height: 2000px;overflow-y: auto;"></div>
	</div>
	<script>
	   var mySwiper = new Swiper('.swiper-container', {
			centeredSlides: false,
			slideToClickedSlide: true,
			slidesPerView: 4,
			slidesPerGroup: 3,
			slidesOffsetAfter: 0
		})
		setWidth()
		function setWidth() {
			var swi = document.getElementsByClassName("swiper-slide");
			swi[0].style.width = "50%";
			for (var i = 0 ; i < swi.length; i++) {
				switch(swi.length){
					case 1:
					  swi[i].style.width = "100%"
					  break;
					case 2:
					  swi[i].style.width = "50%"
					  break;
					case 3:
					  swi[i].style.width = "33.3%"
					  break;
					default:
						swi[i].style.width = "25%"
					break;
				}
			}
		}
		nav();
		function nav(){
			var nav=document.getElementById("nav");
			var alink=nav.getElementsByTagName("li");
			for(var i=0;i<alink.length;i++){
				alink[i].index=i;
				alink[i].addEventListener("touchend",function(){
					for(var i=0;i<alink.length;i++){
						alink[i].classList.remove("active");
					}
					this.classList.add("active");
				})
			}
		}
	</script>
</body>
</html>

夜惊如水

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端 swiper 做导航栏

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa...
复制链接

扫一扫