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

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

　　想必大家對于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)獲取圖片數據中，顯示圖片不存在，將圖片存入默認即可，不必用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用戶提供小小的貼心應用，設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。
　　grabCursor: true,
　　// 設定為true時，active slide會居中，而不是默認狀態(tài)下的居左。
　　centeredSlides: true,
　　// 設置slider容器能夠同時顯示的slides數量(carousel模式)。
　　slidesPerView: 1.32,
　　// 啟動動態(tài)檢查器(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使用講解，請大家多多關注后續(xù)！

GPU云服務器云服務器服務器圖片加載失敗 js數組動態(tài)加載圖片 js怎么捕獲動態(tài)加載的數據 linux圖片的加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127603.html

Vue2.x 與Vue3.x 雙向數據綁定區(qū)別

摘要：看過的源碼都知道，其雙向數據綁定原理是通過的，中的方法來實現數據劫持的，但是有一個弊端就是無法兼聽到數組內部的數據變化當然我們可以通過，來實現內部數據變化的檢測。相比有一定的性能問題。 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實現卡片自動輪播效果

　　在許多開發(fā)項目中輪播效果承擔著熱門主題、熱門推薦，以下是在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守衛(wèi)中又跳轉回原來的頁面。　　如下圖所示，在Vue3.X中不僅可以實現點擊刷新，按...

3403771864 2022-09-19 21:28 評論0 收藏0
圖片加載相關技術

摘要：本小節(jié)將討論與圖片加載時機相關的技術預加載與懶加載。同樣，可將請求成功與失敗的回調，作為圖片預加載成功與失敗的處理。目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場景，如照片、背景等。對于這些位圖，我們需要考慮它們在加載過程中的不同狀態(tài)，而制定不同的表現方案。圖片加載過程中的狀態(tài)，大致包括：何時決定...

ZweiZhao 2019-08-20 14:47 評論0 收藏0