vue3.x使用swiperUI动态加载图片失败如何解决
导读:本文共2020字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 版本号:vue/cli:4.5.12swiper:^6.8.4问题1、动态加载图片,但是动态加载图片为空,需要显示默认图片时使用v-if失效<divclass="swiper-containerhome_swiper"><divclass="swiper-wrapper"v-if="aImag... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。版本号:
vue/cli:4.5.12
swiper:^6.8.4
问题
1、动态加载图片,但是动态加载图片为空,需要显示默认图片时使用v-if失效
<divclass="swiper-containerhome_swiper"><divclass="swiper-wrapper"v-if="aImages.length>0"><divclass="swiper-slide"v-for="(item,index)inaImages":key="index"><img:src="item.picUrl"alt=""/></div></div><imgv-elsesrc="~@/assets/images/img_001.png"alt=""/></div>
2、动态加载图片,图片存在时,显示默认图片使用v-if会造成dom节点不刷新
<templatev-if="aImages.length>0"><divclass="swiper-containerhome_swiper"><divclass="swiper-wrapper"><divclass="swiper-slide"v-for="(item,index)inaImages":key="index"><imgsrc="~@/assets/images/img_001.png"alt=""/></div></div></div></template><imgv-elsesrc="默认图片"alt=""/>
解决方案
动态获取图片数据,图片不存在时,将默认图片存入即可,不使用v-if进行判断
//部分代码import{ref,nextTick}from'vue';import{apiImgList}from'@/api/home';//默认图片importdefaultBgfrom"@/assets/images/img_001.png";exportdefault{setup(){constaImages=ref([]);//获取图片列表constfGetImgList=()=>{apiImgList().then(res=>{aImages=res.result&&res.result.length?res.result:[{picUrl:defaultBg}];nextTick(()=>{fInitSwiper();});}).catch(()=>{aImages=[{picUrl:defaultBg}];nextTick(()=>{fInitSwiper();});})};constfInitSwiper=()=>{newSwiper(".home_swiper",{//循环loop:true,//每张播放时长3秒,自动播放spaceBetween:16,//切换效果effect:"coverflow",//该选项给Swiper用户提供小小的贴心应用,设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。grabCursor:true,//设定为true时,activeslide会居中,而不是默认状态下的居左。centeredSlides:true,//设置slider容器能够同时显示的slides数量(carousel模式)。slidesPerView:1.32,//启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。默认false,不开启,可以使用update()方法更新。observer:true,observeParents:true,observeSlideChildren:true,//自动切换autoplay:{//自动切换的时间间隔delay:3000,//如果设置为true,当切换到最后一个slide时停止自动切换stopOnLastSlide:false,//用户操作swiper之后,是否禁止autoplay。默认为true:停止disableOnInteraction:false,},//类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式coverflowEffect:{//slide做3d旋转时Y轴的旋转角度rotate:0,//每个slide之间的拉伸值,越大slide靠得越紧。5.3.6后可使用%百分比stretch:-70,//slide的位置深度。值越大z轴距离越远,看起来越小。depth:500,//depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。modifier:1,//是否开启slide阴影slideShadows:true,}});};return{aImages}}}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
vue3.x使用swiperUI动态加载图片失败如何解决的详细内容,希望对您有所帮助,信息来源于网络。