10swiper库在vue中的使用

Posted 2022-10-19 Ultraman_agul

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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</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>

以上是关于10swiper库在vue中的使用的主要内容，如果未能解决你的问题，请参考以下文章

10swiper库在vue中的使用

Z-index 不适用于 Vue + Laravel 项目中的 vue-awesome-swiper

Swiper - 没有找到依赖打字稿，离子-vue

swiper在Vue项目中的使用

Vue使用vue-awesome-swiper最后一个元素显示不全问题