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

最新推荐文章于 2024-04-23 11:37:57 发布

涛小涛

最新推荐文章于 2024-04-23 11:37:57 发布

阅读量1.7w

点赞数 2

本文链接：https://blog.csdn.net/liuying1802028915/article/details/77040363

版权

这几天在做一个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/

	不积跬步，无以至千里
	不积小流，无以成江海

涛小涛

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
swiper入门小练习-移动端实现上下滑动翻整个页面（一）

这几天在做一个Ht5的小页面，涉及到动画和滑动，所以研究了一下swiper, swiper可以滑动和动画。现在来做一个swiper入门小练习。1.首先在Hbuilder中创建一个项目2.在css文件夹中引入swiper-3.4.2.min.css 文件，这个文件在swiper官网有下3.在js文件夹中引入swiper-3.4.2.min.js 同样这个文件在swiper官网
复制链接

扫一扫