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

时间：2023-01-03 10:43:28

这几天在做一个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/
不积跬步，无以至千里
不积小流，无以成江海



   


标签：
相关文章