前言
网上很多教程在轮播图需要请求后台数据展示的情况下都不好使，下面是我自己踩坑后得出的代码。参考vue的坑 vue-awesome-swiper官方指南
代码
<template>
<swiper :options="swiperOption" v-if="show">
<swiper-slide v-for="item in images" :key="item.value">
<img :src="item.url"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css';
export default {
name: "banner",
props: {
images: Array
},
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
waitForTransition: true
},
loop: true
},
show: false
}
},
watch: {
images: function (newValue, oldValue) {
this.show = true;
}
}
}
</script>
<style scoped>
img {
width: 100%;
height: 100%;
}
</style>
给组件设置一个v-if，watch props传进来的参数，也就是请求完获得数据以后再显示就行了
