vue3如何解決各場(chǎng)景l(fā)oading過(guò)度(避免白屏尷尬!)
Ⅰ、前言
當(dāng)我們每次打卡頁(yè)面,切換路由,甚至于異步組件,都會(huì)有一個(gè)等待的時(shí)間 ;
為了不白屏,提高用戶體驗(yàn),添加一個(gè) loading
過(guò)度動(dòng)畫(huà)是 非常 常見(jiàn)的 ;
那么這幾種場(chǎng)景我們應(yīng)該把 loading
加在哪里呢 ?
Ⅱ、vue3 常見(jiàn)過(guò)度
針對(duì)以下 3 種情況 做了一下整理 ??
① 首次打開(kāi)頁(yè)面時(shí);
② 路由切換時(shí);
③ 異步組件顯示時(shí);
1、 首次打開(kāi)頁(yè)面時(shí) loading
在頁(yè)面首次打開(kāi)的加載內(nèi)容,是最容易的,通過(guò)根目錄 index.html
文件
在 <div id='app'>
里添加內(nèi)容,就是過(guò)度內(nèi)容
<body> <div id="app"> <h1>加載中......</h1> </div> <script type="module" src="/src/main.js"></script> </body>
當(dāng)vue實(shí)例創(chuàng)建完成,通過(guò).mount()
方法掛載到 id='app'
的div 里,會(huì)替換掉里的loading
內(nèi)容;
2、 路由切換時(shí)、異步組件 loading
- 路由切換過(guò)度 需要先了解一個(gè),
vue3
的內(nèi)置組件<Suspense>
; <Suspense>
提供2
個(gè)插槽 ??;#default
: 一個(gè)要加載的內(nèi)容 ;#fallback
: 一個(gè)加載種顯示的內(nèi)容;
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h1>加載中......</h1> </template> </Suspense>
同理:( 異步組件的切換 )
<template> <Suspense> <template #default> <AsyncComp v-if = 'vitblie' /> </template> <template #fallback> <h1>加載中......</h1> </template> </Suspense> <button @click='open'> 切換 </button> </template> <script setup> import { defineAsyncComponent , ref } from 'vue'; const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue)); const vitblie = ref(false); function open(){ vitblie.value = !vitblie.value; } </script>
異步組件也是可以使用相同的方法
Ⅲ、 添加過(guò)度動(dòng)畫(huà)
添加過(guò)度動(dòng)畫(huà)需要先了解 vue3
內(nèi)置組件 <Component>
和 <Transition>
??
<Component>
: 非常簡(jiǎn)單只有一個(gè) is
顯示該組件, 可以用來(lái)組件切換 如:
<template> <Component :is="visible ? TestComp : '' " /> </template>
<Transition>
: 里插入的內(nèi)容 顯示/隱藏 添加過(guò)度動(dòng)畫(huà) ,通過(guò) name
屬性來(lái)拼接 class
如 :
<template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>
設(shè)置樣式通過(guò) name
屬性 這里
anime-enter-active
: 過(guò)度態(tài) ( 設(shè)置 隱藏 => 顯示 過(guò)度的時(shí)間等參數(shù))anime-leave-active
: 過(guò)度態(tài) ( 設(shè)置 顯示 => 隱藏 過(guò)度的時(shí)間等參數(shù))anime-enter-from
=>anime-enter-to
隱藏 => 顯示 開(kāi)始和結(jié)束的樣式anime-leave-from
=>anime-leave-to
顯示 => 隱藏 開(kāi)始和結(jié)束的樣式
組合起來(lái) ??
<template> <router-view v-slot={ Component } > <transition name='anime'> <component :is="Component" /> <transition> </router-view> <template> <style scoped> .anime-enter-active, .anime-leave-active { transition: all 1s; } .anime-leave-from { transform: translateY(0); } .anime-leave-to { transform: translateY(-100%); } .anime-enter-from { transform: translateY(100%); } .anime-enter-to { transform: translate(0); } </style>
總結(jié)
到此這篇關(guān)于vue3如何解決各場(chǎng)景l(fā)oading過(guò)度的文章就介紹到這了,更多相關(guān)vue3各場(chǎng)景l(fā)oading過(guò)度解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07一文詳解Vue中如何實(shí)現(xiàn)頁(yè)面骨架屏
為了提升頁(yè)面加載速度,我們可以使用頁(yè)面骨架屏技術(shù)來(lái)優(yōu)化用戶感知,下面就跟隨小編一起學(xué)習(xí)一下如何在vue中實(shí)現(xiàn)頁(yè)面骨架屏吧2024-03-03使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制的方法,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-08-08詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06