vue3.x使用swiperUI动态加载图片失败如何解决

这篇文章主要讲解了“vue3.x使用swiperUI动态加载图片失败如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3.x使用swiperUI动态加载图片失败

这篇文章主要讲解了“vue3.x使用swiperUI动态加载图片失败如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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
        }
    }
        
}

vue3.x使用swiperUI动态加载图片失败如何解决

感谢各位的阅读,以上就是“vue3.x使用swiperUI动态加载图片失败如何解决”的内容了,经过本文的学习后,相信大家对vue3.x使用swiperUI动态加载图片失败如何解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是恰卡网,小编将为大家推送更多相关知识点的文章,欢迎关注!

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

mysqldump如何进行数据备份

2022-7-16 21:38:01

后端

在VScode中如何配置ROS环境

2022-7-16 21:38:25

搜索