swiper的使用以及this.$nextTick() 介绍

最新推荐文章于 2023-10-09 21:28:21 发布

fzecong

最新推荐文章于 2023-10-09 21:28:21 发布

阅读量295

点赞数

文章标签：服务器 java html

本文链接：https://blog.csdn.net/qq_45217161/article/details/130475619

版权

这段代码展示了一个Vue组件，利用Swiper库创建轮播图。组件监听list属性变化，当数据更新后，利用$nextTick确保DOM更新，然后初始化Swiper实例，配置了循环播放、分页器和导航按钮等功能。

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

<template>
    <div class="swiper-container" ref="cur">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
                <img :src="carousel.imgUrl">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name:"Carsousel",
    props:['list'],
    watch: {
        list: {
            immediate:true,
            handler(newValue, oldValue) {
                this.$nextTick(() => {
                    var mySwiper = new Swiper(
                        this.$refs.cur, {
                        loop: true,
                        observer: true,
                        pagination: {
                            el: ".swiper-pagination",
                            clikable: true,
                        },
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                    })
                })
            }
        }
    }
}
</script>

<style>

</style>

这段代码是一个Vue组件，用来实现轮播图效果。模板中使用了Swiper库来实现轮播图功能。具体解释如下：

1. 在模板中，使用了Swiper库提供的HTML结构，包括swiper-container、swiper-wrapper、swiper-slide、swiper-pagination、swiper-button-prev和swiper-button-next等元素。

2. 在脚本中，首先引入了Swiper库，然后定义了一个Vue组件，包括组件名、props、watch等属性。

3. 在watch中，监听list属性的变化。当list属性发生变化时，会执行handler函数。在handler中，使用$nextTick方法来确保DOM已经更新完毕，然后创建一个Swiper实例，并将其绑定到ref为"cur"的元素上。

4. Swiper实例的配置包括循环播放、观察DOM变化、分页器、导航按钮等功能。

5. 最后，样式部分为空，因为Swiper库已经提供了默认的样式。

handler函数中，使用this.$nextTick()方法来确保DOM已经更新完毕。然后，创建一个Swiper实例，将其绑定到组件中的cur元素上，并设置循环播放、观察器、分页器和导航器等选项。

1、this.$nextTick()

this.$nextTick() 是 Vue.js 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行延迟回调。它的作用是等待当前更新周期结束后再执行回调函数，以确保 DOM 已经更新完毕。

在 Vue.js 的生命周期钩子函数中，当我们改变了数据之后访问某些 DOM 元素，有时会发现没有获取到最新的值，这时候可以使用 this.$nextTick() 方法。

每当 Vue 实例进行数据改变时，Vue.js 会开启一次异步更新，把需要修改的内容放到一个队列中，统一触发，更新结束后通过 $nextTick() 方法执行回调函数。

使用方式如下：

//修改数据 
this.message = 'Hello World' 
//在回调函数中访问 DOM 元素 
this.$nextTick(() => { const msg = document.getElementById('msg') console.log(msg.innerText) 
//输出 "Hello World"
 })

在 Vue.js 中，$nextTick() 是非常常用的方法，它能够解决很多 DOM 操作中的问题，以确保操作正确性和一致性。