swiper入门小练习-移动端实现上下滑动翻整个页面（一）

红太狼 2022-06-10 04:38 415阅读 0赞

这几天在做一个Ht5的小页面，涉及到动画和滑动，所以研究了一下swiper, swiper可以滑动和动画。

现在来做一个swiper入门小练习。

1.首先在Hbuilder中创建一个项目

2.在css文件夹中引入swiper-3.4.2.min.css 文件，这个文件在swiper官网有下

3.在js文件夹中引入swiper-3.4.2.min.js 同样这个文件在swiper官网有下

4.然后新建一个html页面

4.1第一步  <link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />

4.2第二步 <script src="../js/swiper-3.4.2.min.js"></script>

4.3第三步 书写html部分

<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide slide1">Slide1</div>
    				<div class="swiper-slide slide2">Slide2</div>
    				<div class="swiper-slide slide3">Slide3</div>
    			</div>
    		</div>
    		<script src="../js/swiper-3.4.2.min.js"></script>
    	</body>

文中的 div 和 div的各种类

swiper-container  swiper-wrapper swiper-slide 都是参照swiper 知道手册写的 详见：http://www.swiper.com.cn/usage/index.html 
     
     4.4第四步 书写 script的部分 <script>
    		var swiper = new Swiper(".swiper-container", {
    			direction: "vertical",
    		});
    	</script>
    写最简单的 垂直滑动
     
      
     4.5这里还差一步，要给swiper-container 一个高度 负责看不出来 
     4.6为了能看出效果我们将三个slide 分别给上不同的颜色 具体的html全部代码如下： <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.swiper-container{
    				height: 600px;
    			}
    			.slide1{
    				background-color: red;
    			}
    			.slide2{
    				background-color: blue;
    			}
    			.slide3{
    				background-color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide slide1">Slide1</div>
    				<div class="swiper-slide slide2">Slide2</div>
    				<div class="swiper-slide slide3">Slide3</div>
    			</div>
    		</div>
    		<script src="../js/swiper-3.4.2.min.js"></script>
    	</body>
    	<script>
    		var swiper = new Swiper(".swiper-container", {
    			direction: "vertical",
    		});
    	</script>
    </html> 
     这样的效果是：可以滑动但是每一个slide不是充满整个画面，怎么办呢，如果直接把 swiper-container的样式设置为 100% ，反而没有那种效果了，可以试一试 那怎么办呢，给他的父级元素html标签和body标签都加上100%高度，如下就好了 html, body{
    				height: 100%;
    			} 
     完整的代码如下： 
     <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html, body{
    				height: 100%;
    			}
    			.swiper-container{
    				height: 100%;
    			}
    			.slide1{
    				background-color: red;
    			}
    			.slide2{
    				background-color: blue;
    			}
    			.slide3{
    				background-color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide slide1">Slide1</div>
    				<div class="swiper-slide slide2">Slide2</div>
    				<div class="swiper-slide slide3">Slide3</div>
    			</div>
    		</div>
    		<script src="../js/swiper-3.4.2.min.js"></script>
    	</body>
    	<script>
    		var swiper = new Swiper(".swiper-container", {
    			direction: "vertical",
    		});
    	</script>
    </html>
    
    
    好了，这样一个swiper的入门小练习就完成了，可以直接在手机上打开，向下滑动实现一页一页的切换。共勉
     
     想学习更多的swiper,请到swiper中文网去学习，http://www.swiper.com.cn/ 
     不积跬步，无以至千里 不积小流，无以成江海