最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了。
<template>
<div class="slider-box">
<div class="swiper-container" v-if="banners.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(img, index) in banners" :key="index">
<img :src="img" alt />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</template>
<script>
// 引入swiper 6+
import Swiper from "swiper";
import "swiper/swiper.min.css";
import img1 from "@/assets/images/img_1.jpg";
import img2 from "@/assets/images/img_2.jpg";
import img3 from "@/assets/images/img_3.jpg";
export default {
name: "slider",
data() {
return {
banners: []
};
},
mounted() {
this.banners = [img1, img2, img3]
// 需要在数据更新之后调用
this.$nextTick(() => {
new Swiper(".swiper-container", {
autoplay: {
delay: 1000 //1秒切换一次
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
});
}
};
</script>
<style scoped>
.swiper-wrapper img {
width: 100%;
}
/* 设置前进后退 */
.swiper-container {
--swiper-theme-color: #fff; /* 设置Swiper风格 */
--swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
--swiper-navigation-size: 20px; /* 设置按钮大小 */
}
/* 设置分页 */
.swiper-container {
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #fff; /* 两种都可以 */
}
</style>
而且分页器不显示都是体现在DOM中分页器pagination类元素的子节点没有生成渲染,可以自行在自己网页中查看一下:
原因:
分页器下子节点元素没有生成渲染,轮播效果也不正常显示,是因为生成swiper时机太早,发生在数据更新之前。
解决方式一:降低swiper的版本(简单粗暴)
这里在此次提一下,我安装时默认是最新版本wiper@6.4.5,让我们们来操作一下:
npm remove swiper
npm install swiper@5.4.5
同时注意引入swiper的路径要记得根据实际路径进行修改:
import Swiper from 'swiper' // ES引入方式
import 'swiper/css/swiper.min.css' // 根据实际路径和文件修改
OK,终于看到我想要的结果了!
元素节点出现了,类名也出现了,分页器终于显示。
其他解决方案:
a. 使用watch+$nextTick( () =>{界面更新之后立即执行})
b. 使用回调+$nextTick()
c. 利用dispatch()返回的promise