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

前言

广告功能基本上算是每个软件的必备功能之一,常见的除了轮播图,列表之外,就是上下滚动的形式。广告内容不仅支持上下滚动,还需要支持手势操作,以及关闭当前正在预览的广告内容。在 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 来说,鸿蒙在实现上相对简单,而且支持功能都能够通过组合控件实现,只要理解需求,分析透彻,再复杂的功能都能够实现,基本上满足日常需求。学会的小伙伴快动手试试吧!

相关推荐
zhanshuo3 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo3 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu74 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk5 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
爱笑的眼睛115 小时前
HarmonyOS中的PX、 VP、 FP 、LPX、Percentage、Resource 详细区别是什么
华为
liuhaikang9 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛1110 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo1 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo1 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7981 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos