[重构倒数第04天] - 轮播套件难道只可以做图片轮播吗

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

关於轮播这个功能，我相信在很多网站都会用到，而市面上的轮播套件也是百百种，像是 slick.js、Swiper、owl等等，每位工程师各自喜欢的套件都不一样，像是我自己是喜欢用 Swiper的，所以今天我会用 Swiper来做范例，我相信有长时间在追踪我的朋友应该不陌生吧 !

回到正题! 轮播套件除了用在照片的轮播以外，我最常使用到的就是拿来当作整个满版式的网站的主要架构，又或是手机上面的仿 APP的操作切换的时候会用到，举个例子来看一下这个页面，这个网站是我以前做的一个满版式的网站，像这样子的网站是整个页面左滑右滑的，但是如果要自己手动处理的话，其实相对来说麻烦了一点。

1. 首先你要处理网页横向的部分
2. 在来需要针对RWD去做调整
3. 行动装置观看的时候可以用手指去拖动
4. 拖动页面在变换的过程中的滑动笑过
5. 是否需要自动轮播
6. 如果自动轮播中，使用手指滑动中断轮播後的处理
7. 如果页面的内容是非同步更新，或是会动态增加

我上面列的问题只是目前想的到的，还有许多可能没想到的问题需要解决。

所以如果整个的架构给一个开发完善的轮播套件来处理，那我们就只要专心处理里面的内容即可，所以我们来看一下 Swiper 要如何使用，当成我们网站的主要架构。

首先我们可以先安装 Swiper

npm install swiper

然後 import 它

import Swiper from 'swiper';
import 'swiper/css';

这边我们会需要连它的 css 也一起引入，我们来看一下轮播的主要结构

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide page1">page 1</div>
        <div class="swiper-slide page2">page 2</div>
        <div class="swiper-slide page3">page 3</div>
        <div class="swiper-slide page4">page 4</div>
    </div>
</div>

首先我先把整个网站的 html 还有 body 给撑满

html, body {
    position: relative;
    height: 100%;
    background: #eee;
    width: 100%;
    height: 100%;
}
.swiper {
    width: 100%;
    height: 100%;
}

然後 Swiper 最外面的 div.swiper 我也给它撑满，所以里面的内容都会跟者撑满，就变成了我们的页面，重点来了 ! 要使用 Swiper 我们需要等它的DOM都渲染到网页上之後，我们才可以取得到它 div.swiper 这个DOM，所以我们需要在 onMounted 的地方 new Swiper。

import { onMounted } from 'vue'
import Swiper from 'swiper'
import 'swiper/css'
export default {
  setup(){
    let swiper = null
    onMounted(()=> {
      swiper = new Swiper(".mySwiper", {})
    })
  }
}

.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &.page1{ background-color: #f0e4d4; }
    &.page2{ background-color: #f9d9ca; }
    &.page3{ background-color: #bdc2bb; }
    &.page4{ background-color: #d2d5b8; }
}

这样一来我们就可以用滑鼠拖曳页面

所以接下来我们就可以在每个 div 里面去写那些内容，如果想让滑鼠卷轴也可以控制，我们可以在 new Swiper的时候，加上 mousewheel的设定。

new Swiper(".mySwiper", {
    mousewheel: {
        invert: false,
    },
});

• invert : false 是正播，true 是倒播。

codepen范例 : https://codepen.io/MikeCheng1208/pen/eYRKwWp

常用到的设定

1. autoplay ( boolean | options) : 设定 true，就是自动播放，预设是每三秒播放一次，如果是塞物件，就是针对自动播放去调整，下面这样就会变成每五秒钟就播放。

   swiper = new Swiper('.mySwiper', {
       autoplay: {
           delay: 5000,
       },
   });
   

2. loop ( boolean) : 设定是否无限循环。

3. speed (number) : 滑动效果的速度。

常用到的函式

1. swiper.update() : 当我们今天动态塞入新的页面时候，可以透过 update 来重新计算里面的内容，重新计算轮播所需要的资料。
2. swiper.slideTo( index , speed) : index 是要去的页面的索引，speed 是过去页面的速度，通常只会设定 index 而已。
3. swiper.on(event, handler) : 监听 swiper 的事件，swiper有提供很多除了生命周期以外的事件可以去针对动画的每个阶段去做处理。

常用到的事件

1. init : Swiper 初始化的时候执行

      swiper.on('init',()=> {
        console.log('init');
      });
   

2. slideChange : 当一个轮播动画执行结束时触发

   swiper.on('slideChange',()=> {
     console.log('slideChange');
   });
   

3. touchStart : 当手指触摸。

4. touchMove : 当手指滑动。

5. touchEnd : 当手指离开。

Swiper 其实还有很多功能没有办法一一介绍完毕，有兴趣的朋友可以在去官方文件看其他的功能。

Swiper 文件 : https://swiperjs.com/swiper-api

同场加映

GSAP 也可以做 DOM 以外的动画 ?

我们在前面的章节已经知道了 GSAP 这个动画工具，也知道它可以做网页的动画，但其实除了网页的 DOM 可以被拿来操控以外，还有另外一种使用方式，就是针对数字做动画，不知道你有没有看过那种从 0~100 的数字增加效果，说白了网页上面所有的 DOM 都是一个物件，GSAP 就是针对物件里面的 value 去做操作，所以今天不管是不是 DOM 元件，只要是个物件，都可以被 GSAP 给做成动画。

<div id="app">
  <h1>{{num}}</h1>
  <button @click="handleNumeAmin">GO Number!</button>
</div>

import { ref } from 'vue'
import gsap from 'gsap'
export default {
  setup(){
    const num = ref(0)
    
    const handleNumeAmin = () => {
        gsap.to(num, { 
            duration: 3, 
            value: 100
        })
    }
    
    return {
      num,
      handleNumeAmin
    }
  }
}

首先我们的 num 这个变数是 ref 的物件，所以我可以直接拿这个物件来跑我的动画，duration 设定 3 秒，也就是说三秒内，我会把 num.value 跑到 100，我们先来看一下结果。

虽然现在我们的数字产生了从 0 到 100 的动画，但是在中间的补间过程中，有许多的浮点，这是正常的，但是一般使用看到还是不美观，所以我们需要加一个东西，就是onUpdate的生命周期，onUpdate 就是在动画执行的过程中会一直执行，所以我们就要在 onUpdate去处理。

gsap.to(num, { 
    duration: 3, 
    value: 100, 
    onUpdate(){
        num.value = num.value | 0;
    },
});

我在这边把 num.value 去浮点，在重新写回 num.value里面，这样就可以去除後面的浮点了。

先告一段落

其实套件的用法不是只有原本那样的使用方式，其实换个角度思考说不定会有其他的情境的使用方式，就像我上面举的两个范例一样，好啦~我们明天见。

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng