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>

posted on 2020-12-18 20:36 輪滑少年阅读(296) 评论(0) 编辑收藏举报

刷新页面返回顶部