前言

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

實現(xiàn)效果

需求分析

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

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

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

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("點擊了"+item)
          })
        }, (item: string) = > item)

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

this.data.splice(index,1) //index 指的是當(dāng)前位置下標，1代表要刪除的個數(shù)

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

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

總結(jié)

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