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

3403771864 發(fā)布于2022-09-08 21:44 / 664人閱讀

　　想必大家對于vue3.x都很了解，那在vue3.x使用swiperUI動態(tài)加載圖片失敗時候如何解決？以下就為大家介紹兩個常見問題：

　　1、在動態(tài)加載圖片是空，需要顯示默認圖片時使用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、圖片在動態(tài)加載中，也看到有圖片，但顯示默認圖片使用v-if會造成dom節(jié)點不刷新

　　<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="默認圖片" alt="" />

　　以上兩個問題都可以用以下方案解決

　　在動態(tài)獲取圖片數(shù)據(jù)中，顯示圖片不存在，將圖片存入默認即可，不必用v-if進行判斷

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