iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列 第 12

12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二,主題講「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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言