swiper插件异步问题导致静态图片可以正常使用,动态图片第一张和最后一张无法点击轮播

查阅资料发现可能是axios异步问题,swiper获取的是我data中空数据
修改方法一:

<swiper :options="swiperOption" ref="mySwiper" v-if="data.length>1">

我用这种方法的确没问题,但是控制台会报错

查阅论坛找到第二种方法
先在data中定义 ok:false
在axios的接收中修改ok为fase
在这里插入图片描述

<swiper :options="swiperOption" ref="mySwiper" v-if="ok">

完美解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Swiper全屏自适应轮播图片尺寸是指使用Swiper这个轮播插件来实现全屏自适应的图片尺寸展示。Swiper是一个基于原生JavaScript的轮播插件,可以通过设置参数来实现全屏自适应的效果。 首先,我们需要准备好轮播图片,保证图片的尺寸符合要求。一般来说,我们最好将图片尺寸设置为与屏幕分辨率相同或者相近的大小,这样可以在不同的设备上展示出较高的清晰度。 然后,在HTML中引入Swiper的CSS和JS文件,并创建一个容器来放置轮播图片。 接下来,在JavaScript中初始化Swiper插件,设置相关参数。其中,我们需要将轮播容器的宽度和高度设置为100%来实现全屏自适应的效果。可以将容器的宽度和高度设置为浏览器视口的宽度和高度,使用`window.innerWidth`和`window.innerHeight`来获取。 另外,我们还可以设置`effect`参数为"slide"或者"fade",来定义轮播的切换效果。还可以设置`autoplay`参数为true,来自动播放轮播图片最后,加载页面时,Swiper会自动根据设置的参数和轮播容器的尺寸来适应图片展示。当屏幕尺寸改变时,Swiper会自动重新计算并调整图片的尺寸,以达到全屏自适应的效果。 综上所述,通过设置合适的参数和容器尺寸,我们可以实现Swiper全屏自适应轮播图片的效果。这样,无论在不同的设备上,轮播图片都能以适应屏幕的方式展示,提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值