vue中使用v-for循环加载swiper-slide时loop没有生效
vue中使用v-for循环加载swiper-slide时loop没有生效,数据是异步获取的。<div><swiper :options="swiperOption" ref="swiperOption" class="swiper" v-if="recommend.length&
·
vue中使用v-for循环加载swiper-slide时loop没有生效,数据是异步获取的。
<div>
<swiper :options="swiperOption" ref="swiperOption" class="swiper" v-if="recommend.length>0">
<swiper-slide v-for="item in recommend" :key="item.id" class="swiper-slide">
<a :href="item.linkUrl"><img :src="item.picUrl" class="img"/></a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
只要在swiper标签中添加v-if语句,判断异步获取的数据是否返回,如果返回则渲染页面。
awesome-swiper官方的loop中的介绍是“loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的”,如果数据还没返回,swiper就已经渲染,就会导致slide无法复制,因为没有数据给它复制,所以无法实现循环轮播。
这仅是本人的观点,如果有不正确的地方,请大佬多多指教!!!
更多推荐
已为社区贡献3条内容
所有评论(0)