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

简介: 本文介绍了如何在鸿蒙系统中实现一个支持上下滚动的广告控件。功能包括自动滚动、手动滑动、广告删除、自定义播放间隔等。通过使用 Swiper 组件和相关属性(如 disableSwipe、autoPlay),结合数据源操作与手势支持,可轻松完成开发。相比 Android 和 iOS,鸿蒙实现方式更简洁,满足日常需求。建议点赞收藏并动手实践!

前言

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

实现效果

需求分析

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

技术实现

  1. 首先从需求上来看,需要一个支持上下滚动的控件作为广告的容器,一般的做法是先从现有的容器组件中查找是否能满足需求的组件。这里使用的是官方提供的 Swiper 组件。Swiper 组件不仅支持内容的上下滑动还支持左右滑动。
Swiper(this.swiperController)
  1. 确定好容器后,下面就是初始化数据填充组件,这里使用数组作为数据源,用 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)
  1. 删除数据,由于鸿蒙提供了@State装饰器用来修饰数据源,当数据源发生改变时,UI 也会发生相应的变化,这里只需要对数组进行操作即可。
this.data.splice(index,1) //index 指的是当前位置下标,1代表要删除的个数
  1. 设置自动播放时间,以及自动播放,手势等功能。Swiper 组件提供了不少属性用来实现这些功能。如 disableSwiper,autoPlay 等属性。
.disableSwipe(false) //是否支持手动操作
      .autoPlay(true) //是否自动播放
      .interval(1000) //播放时间间隔
      .vertical(true) //内容上下切换
      .indicator(false)

总结

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

目录
打赏
0
0
0
0
20
分享
相关文章
|
1月前
|
43.[HarmonyOS NEXT Row案例十一] 构建智能分页控件:Row组件实现页码与翻页按钮的完美结合
分页控件是数据展示类应用中不可或缺的导航元素,它允许用户在大量数据中进行有序浏览。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个功能完善的分页控件,实现页码显示与前后翻页按钮的完美结合。 分页控件在各类应用场景中广泛应用,如电子商城的商品列表、新闻应用的文章列表、图库应用的图片浏览等。通过合理的设计和交互,可以提升用户的浏览体验和数据访问效率。
65 3
|
1月前
HarmonyOS实战:腾讯IM之消息删除、撤回和重发(三)
本文详细介绍了鸿蒙 IM 聊天中实现消息撤回、删除和重发功能的方法。消息撤回支持在 120 秒内召回自己发送的消息,通过 `revokeMessage` 方法实现;消息删除使用 `deleteMessage` 方法清除本地与云端记录;消息重发则先删除失败消息再重新发送,并处理用户被拉黑的异常情况。结合状态管理,可轻松实现类似微信的功能,建议点赞收藏并动手实践!
112 3
HarmonyOS实战:腾讯IM之消息删除、撤回和重发(三)
70. [HarmonyOS NEXT 实战案例九] 旅游景点网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的旅游景点网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的旅游景点应用。
63 1
|
1月前
|
69.[HarmonyOS NEXT 实战案例九] 旅游景点网格布局(上)
本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现旅游景点网格布局。通过网格布局,我们可以以美观、规整的方式展示各种旅游景点信息,为用户提供良好的浏览体验。
57 1
|
1月前
|
UED
68.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的电影票务网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的电影票务应用。
57 1
67.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(上)
在移动应用开发中,电影票务应用是一个常见的场景,用户可以通过应用查看正在热映的电影信息,并进行选座购票等操作。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电影票务应用中的电影列表网格布局,帮助开发者掌握网格布局的基本用法和实现技巧。
59 1
|
1月前
|
UED
66.[HarmonyOS NEXT 实战案例七] 健身课程网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的健身课程网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的健身课程应用。
64 1
65. [HarmonyOS NEXT 实战案例七] 健身课程网格布局(上)
本教程将介绍如何使用HarmonyOS NEXT的GridRow和GridCol组件实现健身课程的网格布局展示。健身课程网格布局是一种常见的UI设计模式,适用于展示各种健身课程信息,包括课程名称、教练信息、课程时长、难度级别等。通过网格布局,用户可以快速浏览多个课程,并根据自己的需求选择合适的课程。
62 1
61.[HarmonyOS NEXT 实战案例五] 社交应用照片墙网格布局(上)
社交应用中的照片墙是一种常见的UI设计模式,它以网格形式展示用户的照片集合,让用户可以浏览、分享和互动。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个美观、灵活的社交应用照片墙网格布局。 在本教程中,我们将学习如何设计照片墙的数据结构、如何使用GridRow和GridCol组件创建网格布局、如何实现照片卡片,以及如何处理不同尺寸的照片。通过本教程,你将掌握使用GridRow和GridCol组件实现复杂网格布局的技巧。
58 1
|
1月前
|
57.[HarmonyOS NEXT 实战案例三] 音乐专辑网格展示(上)
HarmonyOS NEXT提供了强大的布局组件,其中GridRow和GridCol组件非常适合实现网格布局。在音乐应用中,专辑展示通常采用网格布局,以便用户可以直观地浏览各种音乐专辑。本教程将详细讲解如何使用GridRow和GridCol组件实现音乐专辑的网格展示布局。
64 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问