swiper在vue中的应用案例

Vue+Swiper 实现动态轮播组件的生命周期管理

最新推荐文章于 2024-03-01 16:46:29 发布

原创最新推荐文章于 2024-03-01 16:46:29 发布 · 598 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何使用Vue.js结合Swiper库实现轮播组件，并利用diff算法处理数据更新时的DOM操作，详细讲解了组件的创建、销毁及数据变化时的复用策略。

用到的知识：vue 组件，插槽slot ，diff 算法，vue 生命周期。

swiper 下载地址里面有各种轮播别且还有详细教程。

应用代码：

<!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-7.4.1/swiper/swiper-bundle.min.css">
    <script src="./vue.js"></script>
    <script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        } 
    </style>
</head>
<body>
    <div id="box">
        <!-- 一开始的 key = 0， 当 2s 后取到后端数据时， key 为数组长度， 进行 diff 算法
        对比发现前后两个 swiper 不一样（因为 diff 算法中 key 值对比），于是删除老的，重新创建新的 dom 结构。
        于是 mounted 触发两次，即第一次创建的 没有轮播内容 dom 和第二次取得数据后，两下对比发现
        第一次创建的 dom 不能复用，删除后重新创建新的 dom  -->
        <swiper :key= "datalist.length">  <!-- 这个方法是一样的 。<swiper v-if = "datalist.length"></swiper> -->
            <swiper-item v-for="items in datalist" :key="items">
                 <img :src="items">
            </swiper-item>
        </swiper>
    </div>
    <script>
        // 创建两个组件
        Vue.component("swiperItem",{
            template:`
            <div class="swiper-slide">
                <slot></slot>
            </div>
            `
        }),
        Vue.component("swiper",{
            template:`
            <div class="swiper">
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            </div>
            `,
            mounted(){
                console.log("mounted")
                new Swiper ('.swiper', {
                    loop: true, 
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    autoplay: {
                        delay: 1000,
                        disableOnInteraction: false,
                    },
                }) 
            },
            destroyed(){
                console.log("destroy","第一次创建的 dom 结束了！")
            }
        })
        new Vue({
            el:'#box',
            data:{
                datalist:[]
            },
            mounted(){
            // 模拟请求 
                setTimeout(()=>{
                    this.datalist = [
                        'https://mall.s.maizuo.com/bb4e79ef1de07aab2f8ed91b7fd7e731.jpg',
                        'https://mall.s.maizuo.com/90b7581c565efdf1b3ed8127172d9c87.jpg',
                        'https://mall.s.maizuo.com/e753ab0a0709ff8a7048da1c714c5e06.jpg'
                    ]
                },2000)
            },
        })
    </script>
</body>
</html>