成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

3403771864 / 670人閱讀

　　想必大家對(duì)于vue3.x都很了解，那在vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗時(shí)候如何解決？以下就為大家介紹兩個(gè)常見問(wèn)題：

　　1、在動(dòng)態(tài)加載圖片是空，需要顯示默認(rèn)圖片時(shí)使用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、圖片在動(dòng)態(tài)加載中，也看到有圖片，但顯示默認(rèn)圖片使用v-if會(huì)造成dom節(jié)點(diǎn)不刷新

　　<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="默認(rèn)圖片" alt="" />

　　以上兩個(gè)問(wèn)題都可以用以下方案解決

　　在動(dòng)態(tài)獲取圖片數(shù)據(jù)中，顯示圖片不存在，將圖片存入默認(rèn)即可，不必用v-if進(jìn)行判斷

　　// 部分代碼
　　import {
　　ref,
　　nextTick
　　} from 'vue';
　　import {
　　apiImgList
　　} from '@/api/home';
　　// 默認(rèn)圖片
　　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,
　　//每張自動(dòng)播放且時(shí)長(zhǎng)為3S
　　spaceBetween: 16,
　　// 切換效果
　　effect: "coverflow",
　　// 該選項(xiàng)給Swiper用戶提供小小的貼心應(yīng)用，設(shè)置為true時(shí)，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。
　　grabCursor: true,
　　// 設(shè)定為true時(shí)，active slide會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。
　　centeredSlides: true,
　　// 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。
　　slidesPerView: 1.32,
　　// 啟動(dòng)動(dòng)態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時(shí)，自動(dòng)初始化swiper。默認(rèn)false，不開啟，可以使用update()方法更新。
　　observer: true,
　　observeParents: true,
　　observeSlideChildren: true,
　　// 自動(dòng)切換
　　autoplay: {
　　// 自動(dòng)切換的時(shí)間間隔
　　delay: 3000,
　　// 如果設(shè)置為true，當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換
　　stopOnLastSlide: false,
　　// 用戶操作swiper之后，是否禁止autoplay。默認(rèn)為true：停止
　　disableOnInteraction: false,
　　},
　　// 類似于蘋果將多首歌曲的封面以3D界面的形式顯示出來(lái)的方式
　　coverflowEffect: {
　　// slide做3d旋轉(zhuǎn)時(shí)Y軸的旋轉(zhuǎn)角度
　　rotate: 0,
　　// 每個(gè)slide之間的拉伸值，越大slide靠得越緊。5.3.6 后可使用%百分比
　　stretch: -70,
　　// slide的位置深度。值越大z軸距離越遠(yuǎn)，看起來(lái)越小。
　　depth: 500,
　　// depth和rotate和stretch的倍率，相當(dāng)于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個(gè)參數(shù)的效果越明顯。
　　modifier: 1,
　　// 是否開啟slide陰影
　　slideShadows: true,
　　}
　　});
　　};
　　return {
　　aImages
　　}
　　}
　　}

以上是對(duì)于vue3.x使用講解，請(qǐng)大家多多關(guān)注后續(xù)！



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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127603.html

相關(guān)文章

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

    摘要：看過(guò)的源碼都知道，其雙向數(shù)據(jù)綁定原理是通過(guò)的，中的方法來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持的，但是有一個(gè)弊端就是無(wú)法兼聽到數(shù)組內(nèi)部的數(shù)據(jù)變化當(dāng)然我們可以通過(guò)，來(lái)實(shí)現(xiàn)內(nèi)部數(shù)據(jù)變化的檢測(cè)。相比有一定的性能問(wèn)題。 showImg(https://segmentfault.com/img/bVbsjcO?w=640&h=372);看過(guò)Vue2.x的源碼都知道，其雙向數(shù)據(jù)綁定原理是通過(guò)es5的Object.defin...

    phpmatt 評(píng)論0 收藏0

  • vue3.x使用swiper實(shí)現(xiàn)卡片自動(dòng)輪播效果

    　　在許多開發(fā)項(xiàng)目中輪播效果承擔(dān)著熱門主題、熱門推薦，以下是在vue3.x中使用swiper實(shí)現(xiàn)自動(dòng)輪播。　　安裝Swiper　　npm i [email protected]　　引入組件庫(kù)　　importSwiperfrom'swiper'//引入庫(kù) 　　import'swiper/css/swiper.css'//引入樣式文件，注意5和6版本的樣式文件不一致 　　完整...

    3403771864 評(píng)論0 收藏0

  • Vue3實(shí)現(xiàn)刷新頁(yè)面局部?jī)?nèi)容的示例代碼

    　　可以用實(shí)現(xiàn)局部組件（dom）的重新渲染可以實(shí)現(xiàn)頁(yè)面的局部刷新。有一個(gè)最簡(jiǎn)單辦法，我們可以用Vue中的v-if指令來(lái)實(shí)現(xiàn)?！　∥覀兊乃悸肥牵撼松鲜鲇肰ue中的v-if指令來(lái)實(shí)現(xiàn)，我們也可以用另一個(gè)方法就是新建一個(gè)空白組件，需要刷新局部頁(yè)面時(shí)跳轉(zhuǎn)至這個(gè)空白組件頁(yè)面，然后在空白組件內(nèi)的beforeRouteEnter守衛(wèi)中又跳轉(zhuǎn)回原來(lái)的頁(yè)面?！　∪缦聢D所示，在Vue3.X中不僅可以實(shí)現(xiàn)點(diǎn)擊刷新，按...

    3403771864 評(píng)論0 收藏0

  • 圖片加載相關(guān)技術(shù)

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

    ZweiZhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<