解决swiper轮播图显示最后一张图片问题

解决swiper轮播图显示最后一张图片问题

在使用swiper进行轮播图制作使，如果是由空数组创建

data () {
	  	return {
	  		swiperList:[]
	  	}
	  }
	  
	  
<swiper :options="swiperOption" >
	    <!-- slides -->
	    <swiper-slide v-for="item of list" :key="item.id">
	    	<img class="swiper-img" :src="item.imgUrl"/>
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	  
<script>
	export default {
		name: 'HomeSwiper',
		props: {
			list: Array
		},
		data () {
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					loop:true
				}
			}
		}
	}
</script>

轮播图会显示最后一张图片，如图：
显示最后一张图。

原因：

当页面还没有接收ajax数据的时候，props的list接收的是swiperList:[]空数组，swiper的初始创建是通过空数组创建的，当ajax获取数据后，swiperList变成真正的数据项，再传给子组件时，才获取到新的数据，重新渲染新数据对应的图片，因为swiper的创建是根据空数组创建的才会出现上面的问题。

解决方法：

让swiper由完整的数据来创建，当this.list.length=0，list是空数组时，不会创建，当真正的数据传过来之后，swiper才会被创建，由此解决以上问题。

<swiper :options="swiperOption" v-if="showSwiper">

computed: {
			showSwiper () {
				return this.list.length
			}
		}