iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1

這篇是頁面客製段落其二,主題講「Nuxt 頁面讀取效果如何調整」

用來補充頁面細部設定

讓我們回想錯誤頁面,是用來「呈現錯誤狀態的頁面元件

而頁面渲染前,Nuxt 先自動套用一個暫時的「頁面元件」,讓暫態過度看起來自然、平順

做法同錯誤頁面,按

  • 正在讀取中 => 讀取效果 (Loading)
  • 頁面切換中 => 轉場效果 (Transition)

Nuxt 已為這兩個狀態留了元件掛載點

讀取效果 (Loading)

Nuxt 讀取效果是全域設定,預設是個進度條 (Progress Bar) 效果,放在 lib/components/nuxt-loading.vue

官網文件切換時的效果稍微改了顏色,讀者自行點點看

nuxt.config.js 預設參數是

loading: {
    color: 'black',
    failedColor: 'red',
    height: '2px',
    duration: 5000,
    rtl: false
},

有三種程度的客製:

  1. 針對原進度條元件調整
KEY 型別 預設值 描述
color String 'black' 正常進度條顏色
failedColor String 'red' 錯誤時的進度條顏色
height String '2px' 進度條粗細
throttle Number 200 呈現效果前的緩衝時間,單位毫秒(ms)
duration Number 5000 呈現效果的最長時間,單位毫秒(ms)
rtl Boolean false 進度條方向,false 從左到右,true 反之

單純調整參數而已,簡單


  1. 直接換成客製的讀取效果

新增並更改 nuxt.config.js 讀取效果對應的頁面元件

loading: `~/components/loading.vue`,

  1. 手動控制各頁面的效果觸發時機

想要控制登入頁的讀取效果,得先關掉預設觸發

/pages/login.vue

<script>
	export default {
        /* ... */
        loading: false
	}
</script>

然後手動呼叫讀取效果觸發 API

  • $nuxt.$loading.start(): 顯示進度條
  • $nuxt.$loading.end(): 結束進度條

根據網站設計稿或 User Story 觸發時機調整

可參考案例
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-page-loading?from-embed


上一篇
11. Nuxt 頁面驗證和錯誤顯示
下一篇
13. Nuxt 客製頁面效果 - 轉場(Transition)
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言