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

3403771864 发布于2022-09-08 21:44 / 649人阅读

　　想必大家对于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使用讲解，请大家多多关注后续！

GPU云服务器云服务器服务器图片加载失败 js数组动态加载图片 js怎么捕获动态加载的数据 linux图片的加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127603.html

Vue2.x 与Vue3.x 双向数据绑定区别

摘要：看过的源码都知道，其双向数据绑定原理是通过的，中的方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化当然我们可以通过，来实现内部数据变化的检测。相比有一定的性能问题。 showImg(https://segmentfault.com/img/bVbsjcO?w=640&h=372);看过Vue2.x的源码都知道，其双向数据绑定原理是通过es5的Object.defin...

phpmatt 2019-08-23 17:19 评论0 收藏0
vue3.x使用swiper实现卡片自动轮播效果

　　在许多开发项目中轮播效果承担着热门主题、热门推荐，以下是在vue3.x中使用swiper实现自动轮播。　　安装Swiper　　npm i swiper@5.4.5　　引入组件库　　importSwiperfrom'swiper'//引入库　　import'swiper/css/swiper.css'//引入样式文件，注意5和6版本的样式文件不一致　　完整...

3403771864 2022-09-08 21:56 评论0 收藏0
Vue3实现刷新页面局部内容的示例代码

　　可以用实现局部组件（dom）的重新渲染可以实现页面的局部刷新。有一个最简单办法，我们可以用Vue中的v-if指令来实现。　　我们的思路是：除了上述用Vue中的v-if指令来实现，我们也可以用另一个方法就是新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。　　如下图所示，在Vue3.X中不仅可以实现点击刷新，按...

3403771864 2022-09-19 21:28 评论0 收藏0
图片加载相关技术

摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。图片加载过程中的状态，大致包括：何时决定...

ZweiZhao 2019-08-20 14:47 评论0 收藏0