vue-swiper组件

最新推荐文章于 2025-07-19 21:24:14 发布

@Tiramisu

最新推荐文章于 2025-07-19 21:24:14 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105038690

笔记专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在Vue中自定义封装Swiper组件，解决初始化过早的问题，并演示了使用Swiper进行轮播图展示的方法。

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

自定义封装swiper组件（基于swiper） 
注意： 防止swipe初始化过早

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <script type="text/javascript" src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/swiper/css/swiper.css">
    <script src="lib/swiper/js/swiper.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
        .swiper-slide img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="box">
        <swiper :key="datalist.length">
            <div class="swiper-slide" v-for="data in datalist">
                {{data}}
            </div>
        </swiper>
    </div>

    <script type="text/javascript">
        Vue.component("swiper", {
            template: ` <div :class="'swiper-container ' + which">
            <div class="swiper-wrapper">
                <slot></slot>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>`,
            data() {
                return {
                    which: "a"
                }
            },

            mounted() {
                console.log("swiper-mounted")
                new Swiper('.a', {
                    // direction: 'vertical'
                    loop: true,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    }
                })
            }
        })
        new Vue({
            el: "#box",
            data: {
                datalist: [],
                // which:"a"
            },
            mounted() {
                console.log("root-mounted")
                setTimeout(() => {
                    this.datalist = ["1111", "22222", "33333"]
                }, 2000)
            },
        })
      //  obox.className = "swiper-contrian "+which
    </script>
</body>
</html>