Vue - Swiper

躍上青空發表於2020-12-19
Vue

Vue - Swiper

一：簡介

1. 簡介

  • Swiper常用於移動端網站的內容觸控滑動
  • Swiper是純javascript打造的滑動特效外掛，面向手機、平板電腦等移動終端
  • Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果
  • Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

2. 官網

https://www.swiper.com.cn/

3. CDN

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.cjs.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.browser.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.browser.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.cjs.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.min.js"></script>

二：例項

1. 基礎

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in dataList"><h1 style="text-align: center">{{data}}</h1></div>
        </div>
        <div class="swiper-pagination"></div>

    </div>
</div>

</body>
<script>

    let vm = new Vue({
        el: '#box',
        data: {
            dataList: []
        },
        mounted() {
            // // 這裡有個坑
            // let _this = this
            // setTimeout(function () {
            //     // 這裡的this指的是這個function函式
            //     // this.dataList = ['11111', '22222', '33333']
            //     _this.dataList = ['11111', '22222', '33333']
            // }, 3000)
            setTimeout(() => {  // 使用箭頭函式之後，this指代的是上一層
                this.dataList = ['11111', '22222', '33333']
            }, 3000)
        },
        updated() {
            let mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切換選項
                loop: true, // 迴圈模式選項

                // 如果需要分頁器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        }
    })
</script>
</html>

2. 製作成元件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="box">

    <swipper>
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in dataList1"><h1 style="text-align: center">{{data}}</h1></div>
        </div>
    </swipper>

    <swipper>
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in dataList2"><h1 style="text-align: center">{{data}}</h1></div>
        </div>
    </swipper>

</div>

</body>
<script>
    Vue.component('swipper', {
        template: `
        <div>
            <div class="swiper-container">
                <slot></slot>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        `,
        // 每次更新都會執行該程式碼，會耗費資源
        updated() {
            let mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切換選項
                loop: true, // 迴圈模式選項
                // 如果需要分頁器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        }
    })

    let vm = new Vue({
        el: '#box',
        data: {
            dataList1: [],
            dataList2: []
        },
        mounted() {
            setTimeout(() => {
                this.dataList1 = ['11111', '22222', '33333']
                this.dataList2 = ['66666', '77777', '88888']
            }, 3000)
        },
    })
</script>
</html>

在這裡插入圖片描述

3. 自定義元件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="box">

    <swipper>
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in dataList1"><h1 style="text-align: center">{{data}}</h1></div>
        </div>
    </swipper>

    <swipper :key="dataList2.length">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in dataList2"><h1 style="text-align: center">{{data}}</h1></div>
        </div>
    </swipper>

</div>

</body>
<script>
    Vue.component('swipper', {
        template: `
        <div>
            <div class="swiper-container">
                <slot></slot>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        `,
        mounted() {
            // 每次更新都會執行該程式碼，會耗費資源
            let mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切換選項
                loop: true, // 迴圈模式選項
                // 如果需要分頁器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        }
    })

    let vm = new Vue({
        el: '#box',
        data: {
            dataList1: [],
            dataList2: []
        },
        mounted() {
            setTimeout(() => {
                this.dataList1 = ['11111', '22222', '33333']
                this.dataList2 = ['66666', '77777', '88888']
            }, 3000)
        },
    })
</script>
</html>

相關文章