HarmonyOS 实战：快速实现一个上下滚动的广告控件

2025-05-27
北京
本文字数：1112 字
阅读完需：约 4 分钟

前言

广告功能基本上算是每个软件的必备功能之一，常见的除了轮播图，列表之外，就是上下滚动的形式。广告内容不仅支持上下滚动，还需要支持手势操作，以及关闭当前正在预览的广告内容。在 Android 或 iOS 上要想实现这样的功能并不容易，那么在鸿蒙上怎么实现这样的功能呢？本篇文章教你使用最简单的方式实现一个支持上下滚动的广告控件，建议点赞收藏！

实现效果

需求分析

广告控件支持基本的上下自动滚动和手动滑动。
支持广告删除功能。
支持自定义播放时间间隔，是否自动播放等功能。

技术实现

首先从需求上来看，需要一个支持上下滚动的控件作为广告的容器，一般的做法是先从现有的容器组件中查找是否能满足需求的组件。这里使用的是官方提供的 Swiper 组件。Swiper 组件不仅支持内容的上下滑动还支持左右滑动。

 Swiper(this.swiperController)

复制代码

确定好容器后，下面就是初始化数据填充组件，这里使用数组作为数据源，用 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)

复制代码

删除数据，由于鸿蒙提供了 @State 装饰器用来修饰数据源，当数据源发生改变时，UI 也会发生相应的变化，这里只需要对数组进行操作即可。

 this.data.splice(index,1) //index 指的是当前位置下标，1代表要删除的个数

复制代码

设置自动播放时间，以及自动播放，手势等功能。Swiper 组件提供了不少属性用来实现这些功能。如 disableSwiper，autoPlay 等属性。

 .disableSwipe(false) //是否支持手动操作      .autoPlay(true) //是否自动播放      .interval(1000) //播放时间间隔      .vertical(true) //内容上下切换      .indicator(false)

复制代码

总结

对比 Android 和 iOS 来说，鸿蒙在实现上相对简单，而且支持功能都能够通过组合控件实现，只要理解需求，分析透彻，再复杂的功能都能够实现，基本上满足日常需求。学会的小伙伴快动手试试吧！

发布于: 刚刚阅读数: 2

IT小码哥

关注

还未添加个人签名 2021-04-29 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS 实战：快速实现一个上下滚动的广告控件

前言

实现效果

需求分析

技术实现

总结

IT小码哥

评论