项目场景:vue-cli里面引入swiper轮播组件,开启自动轮播轮播后,第一张图总是一闪而过
vue-cli里面引入swiper轮播组件,使用loop: true,属性
问题描述
vue-cli里面引入swiper轮播组件,开启自动轮播轮播后,第一张图总是一闪而过,切换回最后一张也会出现同一种效果 ,且图像无法正常显示,数据正常。
原因分析:
开始以为是slideChange方法赋值的时候没变赋值对 导致代码中使用数据下标错误,更换activeIndex为realIndex与数据下标一致,仍出现问题,再网上看了别人说几上
observer: true,
observeParents: true,
两个属性还是没成功
new Swiper(".card_swiper", {
effect: "cards",
grabCursor: true,
loop : true,
observer: true,
observeParents: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChange: function(){
_t.acNum = this.activeIndex; //切换结束时,告诉我现在是第几个slide
},
},
});
解决方案:
更换图片组件使用原生的img标签即可,QAQ
html
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in ComposeCommodity" :key="index">
<img class="prrImg" :src="item.cover" alt="">
<!-- <van-image fit="cover" :src="item.cover"></van-image> -->
<div class="s_title text_over">{{ item.name }}</div>
<div>{{item.commodityId}}</div>
<div class="s_tag_out" v-for="(itm,idx) in item.tags.split(',')" :key="idx">
<div class="d_i" v-if="item.tags">{{itm}}</div>
</div>
</div>
</div>
<div class="swiper-button-prev" /><!--左箭头。如果放置在swiper外面,需要自定义样式。-->
<div class="swiper-button-next" /><!--右箭头。如果放置在swiper外面,需要自定义样式。-->
</div>
js
//加载数据
queryComposeCommodity(){
let _t = this;
api.queryComposeCommodity().then(res => {
_t.ComposeCommodity = res.data;
_t.$nextTick(() => {
this.sip();
})
})
},
//Swiper
sip(){
let _t = this;
new Swiper(".card_swiper", {
effect: "cards",
grabCursor: true,
loop : true,
observer: true,
observeParents: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChange: function(){
_t.acNum = this.realIndex; //切换结束时,告诉我现在是第几个slide
},
},
});