vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法

更新時(shí)間：2022年07月14日 17:02:53 作者：老君-hjs

這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的具體解決方法，供大家參考，具體內(nèi)容如下

版本號(hào)：

vue/cli：4.5.12
swiper：^6.8.4

問(wèn)題

1、動(dòng)態(tài)加載圖片，但是動(dòng)態(tài)加載圖片為空，需要顯示默認(rèn)圖片時(shí)使用v-if失效

<div class="swiper-container home_swiper">
?? ?<div class="swiper-wrapper" v-if="aImages.length > 0">
?? ??? ?<div class="swiper-slide" v-for="(item,index) in aImages" :key="index">
?? ??? ??? ?<img :src="item.picUrl" alt="" />
?? ??? ?</div>
?? ?</div>
?? ?<img v-else src="~@/assets/images/img_001.png" alt="" />
</div>

2、動(dòng)態(tài)加載圖片，圖片存在時(shí)，顯示默認(rèn)圖片使用v-if會(huì)造成dom節(jié)點(diǎn)不刷新

<template v-if="aImages.length > 0">
?? ?<div class="swiper-container home_swiper">
?? ??? ?<div class="swiper-wrapper">
?? ??? ??? ?<div class="swiper-slide" v-for="(item,index) in aImages" :key="index">
?? ??? ??? ??? ?<img src="~@/assets/images/img_001.png" alt="" />
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</template>
<img v-else src="默認(rèn)圖片" alt="" />

解決方案

動(dòng)態(tài)獲取圖片數(shù)據(jù)，圖片不存在時(shí)，將默認(rèn)圖片存入即可，不使用v-if進(jìn)行判斷

// 部分代碼
import {
?? ?ref,
?? ?nextTick
} from 'vue';
import {
?? ?apiImgList
} from '@/api/home';
// 默認(rèn)圖片
import defaultBg from "@/assets/images/img_001.png";
export default {
?? ?setup() {
?? ??? ?const aImages = ref([]);
?? ??? ?// 獲取圖片列表
?? ??? ?const fGetImgList = () => {
?? ??? ??? ?apiImgList().then(res => {
?? ??? ??? ??? ?aImages = res.result && res.result.length ? res.result : [{
?? ??? ??? ??? ??? ?picUrl: defaultBg?
?? ??? ??? ??? ?}];
?? ??? ??? ??? ?nextTick(() => {
?? ??? ??? ??? ??? ?fInitSwiper();
?? ??? ??? ??? ?});
?? ??? ??? ?}).catch(() => {
?? ??? ??? ??? ?aImages = [{
?? ??? ??? ??? ??? ?picUrl: defaultBg?
?? ??? ??? ??? ?}];
?? ??? ??? ??? ?nextTick(() => {
?? ??? ??? ??? ??? ?fInitSwiper();
?? ??? ??? ??? ?});
?? ??? ??? ?})
?? ??? ?};
?? ??? ?const fInitSwiper = () => {
?? ??? ??? ?new Swiper(".home_swiper", {
?? ??? ??? ??? ?//循環(huán)
?? ??? ??? ??? ?loop: true,
?? ??? ??? ??? ?//每張播放時(shí)長(zhǎng)3秒，自動(dòng)播放
?? ??? ??? ??? ?spaceBetween: 16,
?? ??? ??? ??? ?// 切換效果?
?? ??? ??? ??? ?effect: "coverflow",
?? ??? ??? ??? ?// 該選項(xiàng)給Swiper用戶提供小小的貼心應(yīng)用，設(shè)置為true時(shí)，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。
?? ??? ??? ??? ?grabCursor: true,
?? ??? ??? ??? ?// 設(shè)定為true時(shí)，active slide會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。
?? ??? ??? ??? ?centeredSlides: true,
?? ??? ??? ??? ?// 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。
?? ??? ??? ??? ?slidesPerView: 1.32,
?? ??? ??? ??? ?// 啟動(dòng)動(dòng)態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時(shí)，自動(dòng)初始化swiper。默認(rèn)false，不開(kāi)啟，可以使用update()方法更新。
?? ??? ??? ??? ?observer: true,
?? ??? ??? ??? ?observeParents: true,
?? ??? ??? ??? ?observeSlideChildren: true,
?? ??? ??? ??? ?// 自動(dòng)切換
?? ??? ??? ??? ?autoplay: {
?? ??? ??? ??? ??? ?// 自動(dòng)切換的時(shí)間間隔
?? ??? ??? ??? ??? ?delay: 3000,
?? ??? ??? ??? ??? ?// 如果設(shè)置為true，當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換
?? ??? ??? ??? ??? ?stopOnLastSlide: false,
?? ??? ??? ??? ??? ?// 用戶操作swiper之后，是否禁止autoplay。默認(rèn)為true：停止
?? ??? ??? ??? ??? ?disableOnInteraction: false,
?? ??? ??? ??? ?},
?? ??? ??? ??? ?// 類(lèi)似于蘋(píng)果將多首歌曲的封面以3D界面的形式顯示出來(lái)的方式
?? ??? ??? ??? ?coverflowEffect: {
?? ??? ??? ??? ??? ?// slide做3d旋轉(zhuǎn)時(shí)Y軸的旋轉(zhuǎn)角度
?? ??? ??? ??? ??? ?rotate: 0,
?? ??? ??? ??? ??? ?// 每個(gè)slide之間的拉伸值，越大slide靠得越緊。5.3.6 后可使用%百分比
?? ??? ??? ??? ??? ?stretch: -70,
?? ??? ??? ??? ??? ?// slide的位置深度。值越大z軸距離越遠(yuǎn)，看起來(lái)越小。
?? ??? ??? ??? ??? ?depth: 500,
?? ??? ??? ??? ??? ?// depth和rotate和stretch的倍率，相當(dāng)于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個(gè)參數(shù)的效果越明顯。
?? ??? ??? ??? ??? ?modifier: 1,
?? ??? ??? ??? ??? ?// 是否開(kāi)啟slide陰影
?? ??? ??? ??? ??? ?slideShadows: true,
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ?};
?? ??? ?return {
?? ??? ??? ?aImages
?? ??? ?}
?? ?}
?? ??? ?
}