首页 Vue.js正文

vue3.x使用swiperUI动态加载图片失败的解决方法

Vue.js 2022-09-01 07:09:26 53

本文实例为大家分享了vue3.x使用swiperUI动态加载图片失败的具体解决方法,供大家参考,具体内容如下

版本号:

vue/cli:4.5.12
swiper:^6.8.4

问题

1、动态加载图片,但是动态加载图片为空,需要显示默认图片时使用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、动态加载图片,图片存在时,显示默认图片使用v-if会造成dom节点不刷新

<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="" />

解决方案

动态获取图片数据,图片不存在时,将默认图片存入即可,不使用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", {
    //循环
    loop: true,
    //每张播放时长3秒,自动播放
    spaceBetween: 16,
    // 切换效果
    effect: "coverflow",
    // 该选项给Swiper用户提供小小的贴心应用,设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。
    grabCursor: true,
    // 设定为true时,active slide会居中,而不是默认状态下的居左。
    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
  }
 }
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

© 编程脚本学习网