vue-awesome-swiper 轮播--动态数据 循环失败解决办法

 问题描述:

在开发过程中可以选择各种轮播插件来实现轮播功能。

在使用vue-awesome-swiper 这个轮播插件时，动态绑定的数据后不可循环。

轮播功能描述：

1.在界面中显示3张图片

2.选中的图片在中间其放大显示

3.循环轮播、不自动轮播

4.默认选中第一张图片

5.切换图片时，获取对应图片的下标

 

list: [], //页面所有数据
//轮播设置
swiperOption: {
init:false,					
initialSlide:0,
centeredSlides: true, //选中的图片在中间放大
slidesPerView: 3, //显示的数量
spaceBetween: 5,
//分页器设置
pagination: {
	el: '.swiper-pagination',
	clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
	type: 'custom',
	renderCustom: function(swiper, current, total) {
	console.log("total")
	console.log(total)
	var paginationHtml = " ";
	for(var i = 0; i < total; i++) {
		// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
		if(i === (current - 1)) {
			paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
		} else {
		paginationHtml += '<span class="swiper-pagination-customs"></span>';
								}
							}
							return paginationHtml;
						},

					},
					loop: true, //循环					
					on: {
						// 使用es6的箭头函数，使this指向vue对象
						slideChange: () => {
							// 通过$refs获取对应的swiper对象
							let swiper = this.$refs.mySwiper.swiper;
							console.log(swiper)
							let i = swiper.realIndex;
							console.log('选中的下标')
							console.log(i)
							this.selectList = this.list.poster[i];

						}
					}

				},

 

computed: {
		  swiper() {
		    return this.$refs.mySwiper.swiper;
		  }
		},
		updated() {
		  console.log("轮播列表");
		  console.log(this.list.poster);
		  if (this.list.poster.length>0) {		    
		    this.swiper.init();
		  }
		},