下载准备：
swiper3.0.6：swiper.min.js和swiper.min.css
下载地址
swiper animate：animate.min.js和animate.min.css
下载地址
下载好上述两组文件后解压，在index.html所在目录分别创建css和js文件夹，将下载的四个文件放入对应文件夹中。
一、引入与配置
在
head
中加入以下代码引入下载的文件
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
因为我们面向的主要是移动端需要保持100%占满屏幕所以再在head加入一段样式（style）
<style>
html{
width: 100%;
height: 100%;
body{
width: 100%;
height: 100%;
.swiper-container {
width: 100%;
height: 100%;
.swiper-slide{
width:100%;
height:100%;
</style>
最后面两个就是我们后面要用到的class名称了马上就可以见到了！
然后我们在
body
的最后加入一段js代码来运行所需要的功能
<script>
const swiper = new Swiper('.swiper-container', {
// 方向：竖向
direction: 'vertical',
//鼠标控制：允许
mousewheelControl:true,
//初始化完成后触发动画
onInit:function(swiper){
swiperAnimate(swiper);
//过度结束时触发动画
onTransitionEnd:function(swiper){
swiperAnimate(swiper);
</script>
这下我们就是配置完毕了！
二、实现滑动和动画
如何实现一页一页的滑动效果呢，在
body
中加入以下代码！
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p>《生成你的专属报告》</p>
</section>
按照格式最外层由两层div包裹，class分别为swiper-container和swiper-wrapper
是不是有点眼熟呢就是我们前面样式设置100%的那两个！
然后再加入一层section标签，class为swiper-slide，slide有滑行的意思，里面包含的内容代表了一次滑动所显示的界面。
那我们怎么加入几页呢？ 只需要把section标签复制就好了，如下代码
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p>《生成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p>《生成我的专属报告》</p>
</section>
<section class="swiper-slide">
<p>《生成他的专属报告》</p>
</section>
这个时候我们保存好文件在浏览器访问就可以出现滑动的效果了！
但是这样翻页实在没有一点h5的感觉，这个时候就要给他们每个部分加入动画了！
动画的实现接住了animate就十分的方便了
只需要在对应的标签内加入固定的class名ani 和设置一些参数就好了 如下面代码
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《生成我的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《生成他的专属报告》</p>
</section>
其中三个参数分别为
| swiper-animate-effect | 切换效果，例如 fadeInUp |
| swiper-animate-duration | 动画持续时间（单位秒），例如 0.5s （可选） |
| swiper-animate-delay | 动画延迟时间（单位秒），例如 0.3s （可选） |
切换效果可以在此页面最下面查看
至此我们就完成了最基础的学习~
<!DOCTYPE html>
<meta charset="UTF-8">
<title>毕业生读书报告</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<style>
html{
width: 100%;
height: 100%;
body{
width: 100%;
height: 100%;
.swiper-container {
width: 100%;
height: 100%;
.swiper-slide{
width:100%;
height:100%;
</style>
</head>
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《生成我的专属报告》</p>
</section>
<section class="swiper-slide">
<p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《生成他的专属报告》</p>
</section>
<script>
const swiper = new Swiper('.swiper-container', {
// 方向：竖向
direction: 'vertical',
//鼠标控制：允许
mousewheelControl:true,
//初始化完成后触发动画
onInit:function(swiper){
swiperAnimate(swiper);
//过度结束时触发动画
onTransitionEnd:function(swiper){
swiperAnimate(swiper);
</script>
</body>
</html>
先定义需要显示的报告页面（利用transition实现过度动画）
<div id="report-content">
<transition name="slide-fade">
<div v-if="showIndex == 1">
第一个页面
</transition>
<transition name="slide-fade">
<div v-if="showIn
“锦城数据实验室”每一期制作的最终的产出是一份HTML5，用户在查看HTML5时的整个过程，将决定了这份HTML5到底能得几分。希望团队中的 数据构思和分析小组成员 能够通过阅读我的这份H5想法的构思的整理总结，能有所启发，有所收获。这篇文章观点来自于个人的经验和认识，如存在偏离实际情况和思维有局限的情况，希望指出。用户最关心什么？从我个人角度，制定一张HTML5页面的评分表，我会考虑如下评分项：...
这是H5项目用的最多的了，最近重新用上有些忘记，还是写出来方便查看基本的，也帮助其他人
HTML部分
这是pug的语法，不写标签名默认即div了，也很好看懂，主要是看层级关系。需要分页器，就要写上一个<div class=".swiper-pagination ">即可 上下页同理。
.swiper-container //最外层
.swiper-wrapper //主要显示层
.swiper-slide /
在上面代码中，如果我们在swiper-wrapper后面还新增了一个自定义的class类名：wrapper_node的话，就会导致H5不能进行左右滑动切换。把自定义的class类名wrapper_node删除就可以了。
常规实现方案是设置overflow-x:scroll;并隐藏滚动条，效果并不会这么流畅，有惯性，从用户的角度说就是丑。
swiper自带的freemode其实就已经实现这种效果了，有兴趣的同学可以去官网api文档查看它的freemode介绍，我们要做的只是将其限制在我们想要它展现的区域范围内。
其实很简单，只需要给其外容器和其本身都加上overflow:hidden便可实现
<script src="/public/static/index/assets/js/Swiper-4.0.7/swiper.min.js"></script>
<script>
$(function () {
FastClick.attach(document.body);
var mySwiper = new Swiper('.swiper-container', {
