前言

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

實現效果

需求分析

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

技術實現

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

Swiper(this.swiperController)

2. 確定好容器后，下面就是初始化數據填充組件，這里使用數組作為數據源，用 ForEach 遍歷數據源，注意如果數據量較大，為了提高更好的性能，使用 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. 刪除數據，由于鴻蒙提供了@State裝飾器用來修飾數據源，當數據源發生改變時，UI 也會發生相應的變化，這里只需要對數組進行操作即可。

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

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

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

總結

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