vue中使用swiper插件实现轮播图
轮播图数据是通过异步请求从服务器获取的,通过 v-for 渲染在轮播图页面结构中。此时需要注意的是:需要等轮播图页面结构渲染数据完成后,这时实例化swiper实例,轮播图的动态效果才生效。以下是实现步骤。一、在项目中安装swiper插件cnpm install --save swiper@5 安装版本5的swiper二、在轮播图组件中引入swiper的js文件和css文件import Swiper
·
轮播图数据是通过异步请求从服务器获取的,通过 v-for 渲染在轮播图页面结构中。此时需要注意的是:需要等轮播图页面结构渲染数据完成后,这时实例化swiper实例,轮播图的动态效果才生效。以下是实现步骤。
一、在项目中安装swiper插件
cnpm install --save swiper@5 安装版本5的swiper
二、在轮播图组件中引入swiper的js文件和css文件
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
三、 在轮播图组件中放入轮播图界面结构
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
//循环遍历服务器返回的数据
<div class="swiper-slide" v-for="(carousel, index) in banner" :key="index" >
<img :src="carousel.imgUrl" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
四、通过 watch + nextTick 实现轮播图动态效果
轮播图效果实现条件:轮播图页面结构完整后实例化swiper对象。
目前情况:页面结构依赖于服务器返回的数据,但是从服务器获取数据是异步请求。因此需要等异步请求获取到了数据并且v-for也执行完毕后,实例化swiper。
watch: {
banner: {
handler(newBanner, oldBanner) {
//只能监听到轮播图数据已经有了,但是v-for动态渲染结构我们还是没有办法确定的,因此还是需要用nextTick
//nextTick: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
this.$nextTick(() => {
var mySwiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
//点击小球的时候也切换图片
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
},
//立即监听:不管你数据有没有变化,我上来立即监听一次
immediate: true,
}
更多推荐
已为社区贡献1条内容
所有评论(0)