vue-awesome-swiper使用传送门，今天使用vue-awesome-swiper做一个数据信息滚动效果的时候，页面加载完后，没出现什么问题，但是一刷新当前页面布局就错乱了，而且loop也失效了。

正确布局如下：

一刷新页面：

网上查了下，发现是加载顺序的问题，因为数据还没有完全加载的时候就已经渲染swiper了。

解决的办法是在初始化的配置选项里面添加一下两个属性就可以了：

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

贴一下自己的代码：

html：

<swiper :options="swiperOption" ref="mySwiper" class="donate-list swiper-no-swiping">
						<swiper-slide class="donate-item clear" v-for="(item,index) in scrollList" :key="index">
							<p>{{index}}ID：{{item.id}}</p>
							<p>{{item.title}}</p>
							<p>{{item.seconds}}</p>
						</swiper-slide>
					</swiper>

js：

data(){
		return {
			scrollList:[{seconds: "2017-03-10", title: "捐赠300", id: "11346279"},{seconds: "2018-01-21", title: "捐赠80", id: "11352761"},
{seconds: "2018-05-16", title: "捐赠100", id: "11354512"}],
			swiperOption:{
				autoplay: {
					delay: 1000
				},
				direction: 'vertical',	//设置滚动方向为垂直
				slidesPerView: 3,	//设置显示个数为3
				loop: true,
				observer:true,//修改swiper自己或子元素时，自动初始化swiper
          		observeParents:true,//修改swiper的父元素时，自动初始化swiper
			},
		}
	},

 

原文：http://www.cnblogs.com/yujiekangweb/p/7544567.html