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

 

 

Logo

前往低代码交流专区

更多推荐