10swiper库在vue中的使用

最新推荐文章于 2024-05-16 10:18:50 发布

Ultraman_agul

最新推荐文章于 2024-05-16 10:18:50 发布

阅读量869

点赞数

分类专栏：前端笔记文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_42699636/article/details/120077745

版权

前端笔记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

swiper库在vue中的使用

网址：https://swiper.com.cn/
基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入swiper的css和js文件 -->
    <link rel="stylesheet" href="../swiper/swiper-4.5.3/dist/css/swiper.min.css">
    <script src="../swiper/swiper-4.5.3/dist/js/swiper.min.js"></script>
    <style>
        .box{
            width: 800px;
            height: 300px;
            background-color: yellow;
            margin: auto;
        }
    </style>
</head>
<body>
    <!-- 基本结构 -->
    <div class="swiper-container box">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <script>
        //初始化轮播功能
        new Swiper(".box",{
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
</body>
</html>

上面的轮播案例，是一个静态轮播，轮播的内容都是固定的，如果内容是服务器动态加载，又需如何处理呢？

动态数据更新轮播

    <!-- 基本结构 -->
    <div class="swiper-container box">
        <div class="swiper-wrapper">
            <!-- 轮播内容动态请求而来 -->
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <script>
        //如果提前初始化，动态加载的内容后，轮播是失效的
        // new Swiper(".box",{
        //     navigation: {
        //         nextEl: '.swiper-button-next',
        //         prevEl: '.swiper-button-prev',
        //     },
        // })
        //模拟异步请求
        setTimeout(function(){
            var data = ["aaa","bbb","ccc","ddd","eee","fff"];
            var list = data.map(item=>`<div class="swiper-slide">${item}</div>`)
            //console.log(list.join(""))
            document.querySelector(".swiper-wrapper").innerHTML = list.join("")
            //先更新DOM，再加初始化Swiper
            new Swiper(".box",{
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        },2000)
    </script>

swiper在Vue中的使用

<div id="box">
    <!-- 基本结构 -->
    <div class="swiper-container box">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in dataList">{{item}}</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>
<script>
    new Vue({
        el:"#box",
        data : {
            dataList : []
        },
        created(){//初始化动态加载数据
            var _this = this;
            setTimeout(function(){
                _this.dataList = ["aaa","bbb","ccc","ddd","eee","fff"];
                //数据加载后，页面中的DOM并没有生成，DOM是通过根据数据的变化构造虚拟DOM后再生成真实的DOM，需要一个过程，是一个异步的操作。所以当前dataList状态改变后，并没有立即生成真实的DOM,直接初始化Swiper，轮播并不会生效。
                // new Swiper(".box",{
                //     navigation: {
                //         nextEl: '.swiper-button-next',
                //         prevEl: '.swiper-button-prev',
                //     }
                // })
            },2000)
        },
        updated(){//当DOM更新后初始化Swiper
            new Swiper(".box",{
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            })
        }
    })
</script>

swiper组件化封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入swiper的css和js文件 -->
    <link rel="stylesheet" href="../swiper/swiper-4.5.3/dist/css/swiper.min.css">
    <script src="../swiper/swiper-4.5.3/dist/js/swiper.min.js"></script>
    <style>
        .box{
            width: 800px;
            height: 300px;
            background-color: yellow;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- :key="dataList.length"给组件添加不同的key,数据更新时，key值不同，虚拟DOM会通过key的对比，key值不同，则构建新的DOM结构，swiper组件重新加载 -->
        <swiper :key="dataList.length" :myconfig="{loop:true}">
            <template #slide>
                <div class="swiper-slide" v-for="item in dataList">{{item}}</div>
            </template>
            <template #arrows>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </template>
            <template #pagination>
                <div class="swiper-pagination"></div>
            </template>
        </swiper>
    </div>
    
    <script>
        Vue.component("swiper",{
            props:["myconfig"],
            template:`
                <div class="swiper-container box">
                    <div class="swiper-wrapper">
                        <slot name="slide"></slot>
                    </div>
                    <!-- Add Arrows -->
                    <slot name="arrows"></slot>
                    <!-- Add Pagination -->
                    <slot name="pagination"></slot>
                </div>
            `,
            mounted(){
                //console.log(this.myconfig)
                var config = {
                    loop:false,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                }
                new Swiper(".box",Object.assign(config,this.myconfig))
            }
        })
        new Vue({
            el:"#box",
            data : {
                dataList : []
            },
            created(){//初始化动态加载数据
                var _this = this;
                setTimeout(function(){
                    _this.dataList = ["aaa","bbb","ccc","ddd","eee","fff"];
                },2000)
            }
        })
    </script>
</body>
</html>

Ultraman_agul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10swiper库在vue中的使用

swiper库在vue中的使用网址：https://swiper.com.cn/基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit..
复制链接

扫一扫