swiper自动循环轮播--第一页swiper空白

采用swiper组件type_Swiper参数选项,设置轮播loop=true,当轮播一遍再次跳转到第一个swiper时,发现空白,手动触发以后,直接到下一个出现,有网友排查现象:

当最后一个swiper 跳转到 第一个 swiper时。
transform: translate3d(-AAApx, 0px, 0px);
AAA 值只有增大,没有减小到firstswiper位置值。

现象复现:如果swiper-slide设置的是写死的值,则不会有问题,有问题的现象是使用图片,会给第一页和最后一页加个swiper-slide,但是没有赋予图片的属性值,导致不显示。

解决方案:

1、如果第一页图片不多的话,可以针对性的给第一页图片赋值显示。注意:第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片.

 const duplicateSlide = this.$refs.bannerSwiper.$el.querySelectorAll('.swiper-slide-duplicate img'); 
    if (duplicateSlide.length) { 
        duplicateSlide.item(0).src = this.getImg(this.bannerList[this.bannerList.length - 1].bannerImage); 
        duplicateSlide.item(1).src = this.getImg(this.bannerList[0].bannerImage); 
        }

2、其实img标签是好使的,可以切换成img标签。如果本身需要其他组件库里面占位图啥的,可以参考这篇文章img标签图片未加载完成占位图-CSDN博客,设置after属性来设置占位图,解决问题。

参考:https://github.com/surmon-china/vue-awesome-swiper/issues/178

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值