鴻蒙HarmonyOS開發(fā)實(shí)戰(zhàn)往期必看文章：（持續(xù)更新......）

HarmonyOS NEXT應(yīng)用開發(fā)性能實(shí)踐總結(jié)（持續(xù)更新......）

HarmonyOS NEXT應(yīng)用開發(fā)案例實(shí)踐總結(jié)合集（持續(xù)更新......）

一分鐘了解”純血版！鴻蒙HarmonyOS Next應(yīng)用開發(fā)！

最新版！“非常詳細(xì)的” 鴻蒙HarmonyOS Next應(yīng)用開發(fā)學(xué)習(xí)路線！（從零基礎(chǔ)入門到精通）

---

介紹

本示例介紹Stack堆疊組件和LoadingProgress加載組件模擬首次進(jìn)入頁面實(shí)現(xiàn)頁面加載的效果。加載完成后，LoadingProgress組件會(huì)消失并展示加載結(jié)果頁（即商品頁）。

效果圖預(yù)覽

使用說明

1. 進(jìn)入頁面開始加載，加載完成后顯示整個(gè)界面。

實(shí)現(xiàn)思路

1. 為了實(shí)現(xiàn)在頁面初次加載時(shí)即展現(xiàn)出加載提示效果，預(yù)先定義了一個(gè)布爾類型的變量isLoading，并將其初始值設(shè)定為true。在頁面加載初期，這一變量狀態(tài)將觸發(fā)加載頁的顯現(xiàn)，傳達(dá)數(shù)據(jù)正在加載的即時(shí)信息。

build() {Stack() {if (this.isLoading) {// 加載頁LoadingHUD();} else {// 商品頁CommodityList();}}.width('100%').height('100%').backgroundColor(Color.White)
}

1. 為了模擬真實(shí)的網(wǎng)絡(luò)加載情景，設(shè)置了5秒的延遲加載機(jī)制。在頁面初次加載后的5秒鐘內(nèi)，isLoading變量保持為true，保持加載頁的展示。當(dāng)5秒時(shí)限到達(dá)時(shí)，將isLoading變量的值更新為false，代表加載狀態(tài)的loadingHUD將會(huì)消失，真正的加載結(jié)果CommodityList商品列表頁面便會(huì)呈現(xiàn)出來。

aboutToAppear(): void { // 模擬網(wǎng)絡(luò)請求操作，請求網(wǎng)絡(luò)3秒后得到數(shù)據(jù)，通知組件，變更列表數(shù)據(jù)setTimeout(() => {this.isLoading = false;}, MILLISECONDS);
}

1. CommodityList商品列表頁面采用RelativeContainer相對(duì)布局組件，容器內(nèi)子組件區(qū)分水平方向，垂直方向，子組件可以將容器或者其他子組件設(shè)為錨點(diǎn)。

RelativeContainer() {// 商品圖片Image(item.uri)....alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start }}).id('image')// 保價(jià)標(biāo)簽Text(item.insurance)....alignRules({right: { anchor: "__container__", align: HorizontalAlign.End },center: { anchor: "__container__", align: VerticalAlign.Center }}).id('insurance')// 瀏覽量Row() {Image($r('app.media.page_loading_views'))...Text(item.views)...}.alignRules({middle: { anchor: "insurance", align: HorizontalAlign.Center },top: { anchor: "insurance", align: VerticalAlign.Bottom }}).id('views')// 標(biāo)題和價(jià)格標(biāo)簽Column() {Text(item.title)...Text(item.price)...}.alignRules({left: { anchor: "image", align: HorizontalAlign.End },right: { anchor: "insurance", align: HorizontalAlign.Start },center: { anchor: "image", align: VerticalAlign.Center }}).id('column')
}

高性能知識(shí)點(diǎn)

本示例使用了LazyForEach進(jìn)行數(shù)據(jù)懶加載，LazyForEach懶加載可以通過設(shè)置cachedCount屬性來指定緩存數(shù)量，同時(shí)搭配組件復(fù)用能力以達(dá)到性能最優(yōu)效果。

工程結(jié)構(gòu)&模塊類型

pageloading                                      // har類型
|---mock
|   |---CommodityMock.ets                        // 本地?cái)?shù)據(jù)源 
|---model
|   |---CommodityDataModel.ets                   // 數(shù)據(jù)類型定義
|   |---CommodityDataSource.ets                  // 列表數(shù)據(jù)模型 
|---view
|   |---CommodityList.ets                        // 商品列表自定義組件 
|   |---LoadingHUD.ets                           // 加載自定義組件 
|   |---PageLoading.ets                          // 主頁面

模塊依賴

本實(shí)例依賴common模塊來實(shí)現(xiàn)資源的調(diào)用以及路由模塊來注冊路由。