前言

該系列是為了讓看過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