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

  想必大家对于vue3.x都很了解,那在vue3.x使用swiperUI动态加载图片失败时候如何解决?以下就为大家介绍两个常见问题:

  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,
  //每张自动播放且时长为3S
  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
  }
  }
  }

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

以上是对于vue3.x使用讲解,请大家多多关注后续!

原创文章,作者:网友投稿,如若转载,请注明出处:https://www.cloudads.cn/archives/4180.html

发表评论

登录后才能评论