<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 操作中的问题,以确保操作正确性和一致性。