想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com

場景說明

輪播圖是一個(gè)在固定區(qū)域內(nèi)輪流展示多張圖片或文本信息的組件。輪播圖會(huì)在預(yù)設(shè)時(shí)間間隔內(nèi)，自動(dòng)或手動(dòng)切換到下一張圖片。輪播圖的應(yīng)用場景包括首頁輪播圖、圖片展示、廣告推廣和新聞資訊等，作用主要是通過多張圖片的切換，提高頁面的信息密度，增加視覺沖擊力，為用戶呈現(xiàn)更全面、更直觀的信息。OpenHarmony可以使用Swiper輪播組件實(shí)現(xiàn)輪播圖。

本例基于橘子購物示例應(yīng)用，為大家介紹輪播組件Swiper，該組件提供滑動(dòng)輪播顯示的能力。

效果呈現(xiàn)

橘子購物示例應(yīng)用首頁輪播圖的實(shí)現(xiàn)效果如下：

OpenHarmony使用Swiper組件實(shí)現(xiàn)輪播圖-開源基礎(chǔ)軟件社區(qū)

開發(fā)實(shí)現(xiàn)

在橘子購物示例應(yīng)用中，輪播圖實(shí)現(xiàn)的核心代碼位于：OrangeShopping/feature/navigationHome/src/main/ets/components/home/Swiper.ets。

橘子購物示例應(yīng)用中輪播圖部分代碼如下：

import { INDEX_DATA } from '../../mock/ProductsData'

@Component
export struct SwiperComponent {
  @StorageProp('curBp') curBp: string = 'md'

  build() {
    Swiper() {
      ForEach(INDEX_DATA, item => {
        Image(item.img)
          .objectFit(ImageFit.Cover)
          .width('100%')
          .height('100%')
          .borderRadius(16)
      })
    }
    .padding({ left: 12, right: 12 })
    .height(170)
    .autoPlay(true)
    .itemSpace(20)
    .displayCount(this.curBp === 'sm' ? 1 : this.curBp === 'md' ? 2 : 3)
    .indicatorStyle({
      selectedColor: $r('app.color.red'),
      color: $r('app.color.white')
    })
  }
}

接下來，我們一起學(xué)習(xí)下這些代碼。

組件代碼

在上述代碼中，在Swiper組件中通過ForEach函數(shù)遍歷INDEX_DATE這個(gè)SwiperModel數(shù)組，將每一個(gè)SwiperModel對(duì)象中的圖片用Image組件展示出來。

另外，通過Swiper的.displayCount()屬性對(duì)不同尺寸的窗口設(shè)置不同的每頁子組件顯示個(gè)數(shù)。此處狀態(tài)變量curBp被StorageProp裝飾器所裝飾，將與AppStorage建立單向數(shù)據(jù)綁定，該狀態(tài)變量的值將使用AppStorage中的值進(jìn)行初始化，AppStorage中的屬性值的更改會(huì)導(dǎo)致綁定的UI組件進(jìn)行狀態(tài)更新。裝飾器在這里不做贅述，有興趣可以查看文檔：應(yīng)用級(jí)變量的狀態(tài)管理 · HarmonyOS應(yīng)用開發(fā)。

對(duì)于屏幕尺寸進(jìn)行說明：xs代表最小寬度類型設(shè)備，sm代表小屏，md代表中屏，lg代表大屏。

代碼中涉及到的Swiper組件的特有屬性用法如下，如果需要詳細(xì)了解輪播組件，可以查看：輪播組件(Swiper) · 開發(fā)指南。也可以查閱Swiper容器組件 · HarmonyOS應(yīng)用開發(fā)了解更多Swiper組件屬性。

輪播圖少不了和Image組件打交道，如果想要了解更多Image組件屬性，請(qǐng)查閱：Image-基礎(chǔ)組件 · HarmonyOS應(yīng)用開發(fā)；如果想要獲取Image組件的使用示例，請(qǐng)查閱：顯示圖片(Image) · OpenHarmony/docs - Gitee.com。

橘子購物示例應(yīng)用輪播組件中涉及的Image組件的特有屬性用法如下：

其中，ImageFit參數(shù)包含如下選項(xiàng)：

導(dǎo)入和導(dǎo)出

export：在聲明時(shí)將 SwiperComponent 這個(gè)組件導(dǎo)出，導(dǎo)出的組件可以被其他ets文件導(dǎo)入。

import：首行使用import從相對(duì)路徑../../mock/ProductsData這個(gè)文件中導(dǎo)入INDEX_DATA常量數(shù)組

export const INDEX_DATA: Array<SwiperModel> = [
  { id: 0, img: $r('app.media.banner_movie1') },
  { id: 1, img: $r("app.media.banner_movie3") },
  { id: 2, img: $r('app.media.banner_movie1') },
  { id: 3, img: $r("app.media.banner_movie3") }
]

SwiperModel的定義，用于構(gòu)建一個(gè)輪播對(duì)象實(shí)例。

export class SwiperModel {
  constructor(public id: number, public img: Resource) {
    this.id = id
    this.img = img
  }
}

資源的分類與訪問

應(yīng)用開發(fā)中使用的各類資源文件，需要放入特定子目錄中存儲(chǔ)管理。resources目錄包括三大類目錄，一類為base目錄，一類為限定詞目錄，還有一類為rawfile目錄。stage模型多工程情況下共有的資源文件放到AppScope下的resources目錄，base目錄默認(rèn)存在。

base目錄的二級(jí)子目錄為資源組目錄，用于存放字符串、顏色、布爾值等基礎(chǔ)元素，以及媒體、動(dòng)畫、布局等資源文件。

在工程中，通過$r('app.type.name')的形式引用應(yīng)用資源，$r是一個(gè)全局函數(shù)，接收一個(gè)字符串路徑并返回這個(gè)資源文件。app代表應(yīng)用內(nèi)resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表資源命名，由開發(fā)者定義資源時(shí)確定。

應(yīng)用使用某資源時(shí)，系統(tǒng)會(huì)根據(jù)當(dāng)前設(shè)備狀態(tài)優(yōu)先從相匹配的限定詞目錄中尋找該資源。只有當(dāng)resources目錄中沒有與設(shè)備狀態(tài)匹配的限定詞目錄，或者在限定詞目錄中找不到該資源時(shí)，才會(huì)去base目錄中查找。rawfile是原始文件目錄，不會(huì)根據(jù)設(shè)備狀態(tài)去匹配不同的資源。

本例中對(duì)圖片的引用 "app.media.banner_movie1" 和對(duì)顏色的引用$r('app.color.white')，分別對(duì)應(yīng)resources/base/media/banner_movie1.png這張圖片和resources/base/element/color.json這個(gè)json文件中的white顏色值。

關(guān)于資源的分類與訪問，此處不做詳細(xì)描述。官方資料見參考文檔：資源分類與訪問 · HarmonyOS應(yīng)用開發(fā)。

想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com