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

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

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

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

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

---

介紹

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

效果圖預覽

使用說明

1. 進入頁面開始加載，加載完成后顯示整個界面。

實現(xiàn)思路

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

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

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

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

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

RelativeContainer() {// 商品圖片Image(item.uri)....alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start }}).id('image')// 保價標簽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')// 標題和價格標簽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')
}

高性能知識點

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

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

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

模塊依賴

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