Vue.js中的Swiper组件使用详解-优快云博客

本文详细介绍了如何在Vue.js项目中集成和使用Swiper组件，涵盖了基本配置、滑动效果、动态加载及交互事件等关键点，旨在帮助开发者实现高效且美观的轮播图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="swiper-bundle.css">
    <script src="swiper-bundle.js"></script>
    <script src="vue.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 450px;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <swiper v-if="dataList.length" :myoption="{loop: true,direction: 'vertical'}">
            <div class="swiper-slide" v-for="item in dataList">
                <img :src="item" alt="">
            </div>
            <template #page>
                <div class="swiper-pagination"></div>
            </template>
        </swiper>
    </div>
    <script>
        //组件
        Vue.component('swiper', {
            props: ['myoption'],
            template: `
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
                <slot name="page"></slot>
            </div>`,
            //  Object.assign() -> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
            mounted() {
                //自定义配置项
                console.log(this.myoption);
                var swiperObj = {
                    loop: false,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                }

                new Swiper(".swiper-container", Object.assign(swiperObj, this.myoption));
            }
        })

        new Vue({
            el: '#app',
            data: {
                dataList: ''
            },
            mounted() {
                this.dataList = ['https://t7.baidu.com/it/u=3344069233,1239888910&fm=193&f=GIF',
                    'https://t7.baidu.com/it/u=3964797077,2797302290&fm=193&f=GIF',
                    'https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF'
                ];
            }
        })
    </script>
</body>
</html>

swiper 组件