公司需要制作国外官网，各种花里胡哨的动效，并且要求全屏滚动
开始编写首页前，需要先将全屏滚动弄好，我对比swiper和fullPage两个插件，还是决定使用swiper，毕竟swiper熟悉点，不用太多学习成本。
当我下载完最新版本的swiper，即目前的5.3.1版本，发现垂直滚动有些问题，开启鼠标滚动切换只能切换2-3个模板，而且感觉切换不顺畅。效果如下：
swiper-5.3.1.gif
然后再网上查询，发现别人用的是4.x版本的swiper，于是又去官网下载了4.5.3版本的swiper，虽然鼠标滚动切换很顺畅，但是不能满足业务需求。因为其他版块有切换动画，底部栏相比其他版块高度低很多，所以我需要的是从最后一个版块（底部）向上滚动切换到倒数第三个版块，而不是倒数第二个。效果如下：
swiper-4.5.3.gif
于是最后，还是swiper版本的问题，我决定和别人的版本一致，使用4.0.6版本的swiper，满足业务需求。效果如下：
swiper-4.0.6.gif
下面为模板代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="../static/css/reset.css">
<link rel="stylesheet" href="../static/css/index.css">
<link rel="stylesheet" href="../static/css/swiper-4.5.3.css">
</head>
<body>
<main role="main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide header">header</div>
<div class="swiper-slide">section 1</div>
<div class="swiper-slide">section 2</div>
<div class="swiper-slide">section 3</div>
<div class="swiper-slide">section 4</div>
<div class="swiper-slide footer">footer</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</main>
</body>
<script src="../lib/jquery-3.4.1.min.js"></script>
<!-- <script src="../lib/swiper-5.3.1.js"></script> -->
<!-- <script src="../lib/swiper-4.5.3.js"></script> -->
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script>
<script>
$(function() {
const mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', // Slides的滑动方向-垂直
mousewheel: true, // 开启鼠标滚轮控制Swiper切换。
speed: 500, // 切换速度
slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。'auto'则自动根据slides的宽度来设定数量。
touchRatio: 0, // 触摸比例。 设置为0时，完全无法滑动
spaceBetween: 10, // slide之间距离(demo用于区分slide, 实际开发可删除)
// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
})
})
</script>
</html>
.autoPage {
width: 100%;
height: 100%;
}
html,
body,
main {
position: relative;
height: 100%;
background-color: #f5f5f5;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: #000;
background: #fff;
}
.swiper-container .swiper-wrapper .header,
.swiper-container .swiper-wrapper .footer {
height: 200px;
}
网友评论