前言

廣告功能基本上算是每個(gè)軟件的必備功能之一，常見(jiàn)的除了輪播圖，列表之外，就是上下滾動(dòng)的形式。廣告內(nèi)容不僅支持上下滾動(dòng)，還需要支持手勢(shì)操作，以及關(guān)閉當(dāng)前正在預(yù)覽的廣告內(nèi)容。在 Android 或 iOS 上要想實(shí)現(xiàn)這樣的功能并不容易，那么在鴻蒙上怎么實(shí)現(xiàn)這樣的功能呢？本篇文章教你使用最簡(jiǎn)單的方式實(shí)現(xiàn)一個(gè)支持上下滾動(dòng)的廣告控件，建議點(diǎn)贊收藏！

實(shí)現(xiàn)效果

需求分析

1. 廣告控件支持基本的上下自動(dòng)滾動(dòng)和手動(dòng)滑動(dòng)。
2. 支持廣告刪除功能。
3. 支持自定義播放時(shí)間間隔，是否自動(dòng)播放等功能。

技術(shù)實(shí)現(xiàn)

1. 首先從需求上來(lái)看，需要一個(gè)支持上下滾動(dòng)的控件作為廣告的容器，一般的做法是先從現(xiàn)有的容器組件中查找是否能滿足需求的組件。這里使用的是官方提供的 Swiper 組件。Swiper 組件不僅支持內(nèi)容的上下滑動(dòng)還支持左右滑動(dòng)。

Swiper(this.swiperController)

2. 確定好容器后，下面就是初始化數(shù)據(jù)填充組件，這里使用數(shù)組作為數(shù)據(jù)源，用 ForEach 遍歷數(shù)據(jù)源，注意如果數(shù)據(jù)量較大，為了提高更好的性能，使用 LazyForEach 懶加載的方式替代 ForEach。

ForEach(this.data, (item: string,index:number) = > {
          Row() {
            Text(item)
              .fontColor(0xfff5a51c)
              .fontSize(12)
              .layoutWeight(1)
            Image($r("app.media.service_notice_close"))
              .width(16)
              .height(16)
              .onClick(()= >{
                this.data.splice(index,1)
              })

          }.width(FULL_WIDTH)
          .padding({left:20,right:20})
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Start)
          .width(FULL_WIDTH)
          .onClick(()= >{
            console.log("點(diǎn)擊了"+item)
          })
        }, (item: string) = > item)

3. 刪除數(shù)據(jù)，由于鴻蒙提供了@State裝飾器用來(lái)修飾數(shù)據(jù)源，當(dāng)數(shù)據(jù)源發(fā)生改變時(shí)，UI 也會(huì)發(fā)生相應(yīng)的變化，這里只需要對(duì)數(shù)組進(jìn)行操作即可。

this.data.splice(index,1) //index 指的是當(dāng)前位置下標(biāo)，1代表要?jiǎng)h除的個(gè)數(shù)

4. 設(shè)置自動(dòng)播放時(shí)間，以及自動(dòng)播放，手勢(shì)等功能。Swiper 組件提供了不少屬性用來(lái)實(shí)現(xiàn)這些功能。如 disableSwiper，autoPlay 等屬性。

.disableSwipe(false) //是否支持手動(dòng)操作
      .autoPlay(true) //是否自動(dòng)播放
      .interval(1000) //播放時(shí)間間隔
      .vertical(true) //內(nèi)容上下切換
      .indicator(false)

總結(jié)

對(duì)比 Android 和 iOS 來(lái)說(shuō)，鴻蒙在實(shí)現(xiàn)上相對(duì)簡(jiǎn)單，而且支持功能都能夠通過(guò)組合控件實(shí)現(xiàn)，只要理解需求，分析透徹，再?gòu)?fù)雜的功能都能夠?qū)崿F(xiàn)，基本上滿足日常需求。學(xué)會(huì)的小伙伴快動(dòng)手試試吧！