A香蕉成人大片1,欧美成人日韩亚洲一区二区三区

介紹

OpenHarmony ArkTS提供了豐富的接口和組件，開(kāi)發(fā)者可以根據(jù)實(shí)際場(chǎng)景和開(kāi)發(fā)需求，選用不同的組件和接口。在本篇Codelab中，我們使用Scroll、List以及LazyForEach實(shí)現(xiàn)一個(gè)商品列表的頁(yè)面，并且擁有下拉刷新，懶加載和到底提示的效果。效果圖如下：

環(huán)境搭建

軟件要求

[DevEco Studio]版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

開(kāi)發(fā)板類型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

[獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
搭建燒錄環(huán)境。
1. [完成DevEco Device Tool的安裝]
2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
搭建開(kāi)發(fā)環(huán)境。
1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”），選擇JS或者eTS語(yǔ)言開(kāi)發(fā)。
3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                      // 代碼區(qū)
│  ├──common
│  │  └──CommonConstants.ets               // 常量集合文件
│  ├──entryability
│  │  └──EntryAbility.ts                   // 應(yīng)用入口，承載應(yīng)用的生命周期
│  ├──pages
│  │  └──ListIndex.ets                     // 頁(yè)面入口
│  ├──view
│  │  ├──GoodsListComponent.ets            // 商品列表組件
│  │  ├──PutDownRefreshLayout.ets          // 下拉刷新組件
│  │  └──TabBarsComponent.ets              // Tabs組件
│  └──viewmodel
│     ├──InitialData.ets                   // 初始化數(shù)據(jù)
│     └──ListDataSource.ets                // List使用的相關(guān)數(shù)據(jù)加載
└──entry/src/main/resources
    ├──base
    │  ├──element                          // 字符串以及顏色的資源文件
    │  ├──media                            // 圖片等資源文件
    │  └──profile                          // 頁(yè)面配置文件存放位置
    ├──en_US
    │  └──element
    │     └──string.json                   // 英文字符存放位置
    └──zh_CN
        └──element
           └──string.json                  // 中文字符存放位置
           
`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

頁(yè)面布局

頁(yè)面使用Navigation與Tabs做頁(yè)面布局，使用Navigation的title屬性實(shí)現(xiàn)頁(yè)面的標(biāo)題，Tabs做商品內(nèi)容的分類。示例代碼如下：

// ListIndex.ets
Row() {
  Navigation() {
    Column() {
      TabBars()
    }
    .width(LAYOUT_WIDTH_OR_HEIGHT)
    .justifyContent(FlexAlign.Center)
  }
  .size({ width: LAYOUT_WIDTH_OR_HEIGHT, height: LAYOUT_WIDTH_OR_HEIGHT })
  .title(STORE)
  .titleMode(NavigationTitleMode.Mini)
}
.height(LAYOUT_WIDTH_OR_HEIGHT)
.backgroundColor($r('app.color.primaryBgColor'))

頁(yè)面分為“精選”、“手機(jī)”、“服飾”、“穿搭”、“家居”五個(gè)模塊，由于本篇CodeLab的主要內(nèi)容在“精選”部分，故將“精選”部分單獨(dú)編寫(xiě)代碼，其余模塊使用ForEach遍歷生成。示例代碼如下：

// TabBarsComponent.ets
Tabs() {
  // 精選模塊
  TabContent() {
    Scroll() {
      Column() {
        if (this.refreshStatus) {
          PutDownRefresh({ refreshText: $refreshText })
        }
        GoodsList()
        Text($r('app.string.to_bottom'))
          .fontSize(NORMAL_FONT_SIZE)
          .fontColor($r('app.color.gray'))
      }
      .width(LAYOUT_WIDTH_OR_HEIGHT)
    }
    ...
  }
  .tabBar(this.firstTabBar)

  // 其他模塊
  ForEach(initTabBarData, (item: Resource, index?: number) = > {
    TabContent() {
      Column() {
        Text(item).fontSize(MAX_FONT_SIZE)
      }
      .justifyContent(FlexAlign.Center)
      .width(LAYOUT_WIDTH_OR_HEIGHT)
      .height(LAYOUT_WIDTH_OR_HEIGHT)
    }
    .tabBar(this.otherTabBar(item, index !== undefined ? index : 0))
  })
}
...

商品列表的懶加載

使用Scroll嵌套List做長(zhǎng)列表，實(shí)現(xiàn)Scroll與List的聯(lián)動(dòng)。具體實(shí)現(xiàn)代碼如下：

// TabBarsComponent.ets
Scroll() {
  Column() {
    // 下拉刷新的組件
    if (this.refreshStatus) {
      PutDownRefresh({ refreshText:$refreshText })
    }

    // List的自定義組件
    GoodsList()
    Text($r('app.string.to_bottom')).fontSize(NORMAL_FONT_SIZE).fontColor($r('app.color.gray'))
  }
  .width(LAYOUT_WIDTH_OR_HEIGHT)
}
...

商品列表往往數(shù)據(jù)量很多，如果使用ForEach一次性遍歷生成的話，性能不好，所以這里使用LazyForEach進(jìn)行數(shù)據(jù)的懶加載。當(dāng)向下滑動(dòng)時(shí)，需要加載新的數(shù)據(jù)的時(shí)候，再將新的數(shù)據(jù)加載出來(lái)，生成新的列表。

通過(guò)onTouch事件來(lái)觸發(fā)懶加載行為，當(dāng)商品列表向下滑動(dòng)，加載新的數(shù)據(jù)。示例代碼如下：

// GoodsListComponent.ets
List({ space:commonConst.LIST_ITEM_SPACE }) {
  LazyForEach(this.goodsListData, (item: GoodsListItemType) = > {
    ListItem() {
      Row() {
        Column() {
          Image(item?.goodsImg)
            ...
        }
        ... // 布局樣式

        Column() {
          ... // 布局代碼
        }
        ... // 布局樣式
      }
    }

    // 通過(guò)Touch事件來(lái)觸發(fā)懶加載
    .onTouch((event?：TouchEvent) = > {
      if (event === undefined) {
        return;
      }
      switch (event.type) {
        case TouchType.Down：
          this.startTouchOffsetY = event.touches[0].y;
          break;
        case TouchType.Up：
          this.startTouchOffsetY = event.touches[0].y;
          break;
        case TouchType.Move：
          if (this.startTouchOffsetY - this.endTouchOffsetY > 0) {
            this.goodsListData.pushData();
          }
          break;
      }
    })
  })
}
...

下拉刷新與到底提示

下拉刷新同樣使用TouchEvent做下拉的判斷，當(dāng)下拉的偏移量超出將要刷新的偏移量時(shí)，就展示下拉刷新的布局，同時(shí)使用條件渲染判斷是否顯示下拉刷新布局，實(shí)現(xiàn)效果如下圖：

具體代碼如下：

// TabBarsComponent.ets
putDownRefresh(event?：TouchEvent): void {
  if (event === undefined) {
    return;
  }
  switch (event.type) {
    case TouchType.Down：
      // 記錄手指按下的y坐標(biāo)
      this.currentOffsetY = event.touches[0].y;
      break;
    case TouchType.Move:
      // 根據(jù)下拉的偏移量來(lái)判斷是否刷新
      this.refreshStatus = event.touches[0].y - this.currentOffsetY > MAX_OFFSET_Y;
      break;
    case TouchType.Cancel:
      break;
    case TouchType.Up:
      // 模擬刷新效果，并未真實(shí)請(qǐng)求數(shù)據(jù)
      this.timer = setTimeout(() = > {
        this.refreshStatus = false;
        }, REFRESH_TIME)
      break;
  }
}
...
// 下拉刷新的組件根據(jù)條件決定是否顯示
if (this.refreshStatus) {
  PutDownRefresh({ refreshText:$refreshText })
}

列表到底提示“已經(jīng)到底了”并回彈的效果使用了Scroll的edgeEffect來(lái)控制回彈，實(shí)現(xiàn)效果如下圖：

具體代碼如下：

// TabBarsComponent.ets
Scroll() {
  Column() {
    ...
    GoodsList()
    Text($r('app.string.to_bottom')).fontSize(NORMAL_FONT_SIZE).fontColor($r('app.color.gray'))
  }
  .width(LAYOUT_WIDTH_OR_HEIGHT)
}
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.width(LAYOUT_WIDTH_OR_HEIGHT)
.height(LAYOUT_WIDTH_OR_HEIGHT)
.onTouch((event?: TouchEvent) = > {
  this.putDownRefresh(event)
})

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴