今天用了一下vue-awesome-swiper,轮播数据是动态渲染的,遇到的坑是:配置 loop : true,
无效,不能轮循,查看代码是前后根本没有多插数据,于是百度一下,支的招不少,都不能奏效,
什么添加observer:true,observeParents:true,等都不能奏效,什么加载顺序,都没奏效;
如有遇到同样问题的朋友,可用我的这简单的方法,v-if判断一下,实现loop;
---------------------
//这是我vue一个组件,
<template>
<div>
//第一个轮播 加了v-if 判断,可以实现 loop 轮循
<swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
////第二个轮播 没加判断 不能实现loop 可试试看
<swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>