【OpenHarmony】鸿蒙 UI开发之banner

最新推荐文章于 2026-04-20 22:04:13 发布

原创

最新推荐文章于 2026-04-20 22:04:13 发布 · 1.3k 阅读

标签

#harmonyos #ui #ArkUI #Arkts #装饰器模式

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

简介

本项目是适配OpenHarmony环境的一款banner库，常用于广告图片轮播场景，基于Swiper进行封装，能力如下:

支持自动轮播。
支持无限轮播。
支持垂直轮播。
支持自定义指示器。
支持定制的翻页动画效果，目前动画只支持8种动效，无法做到不同动效叠加。

Swiper组件能力和Banner组件能力对比:

能力列表	Swiper组件	Banner组件
自动轮播	支持	支持
无限轮播	支持	支持
垂直轮播	支持	支持
自定义指示器	部分支持	支持
指示器和banner分离	不支持	支持
定制翻页动画效果	不支持	支持

ohpm install @ohos/banner

使用说明

1.提供了自定义轮播组件Banner以及自定义指示器CircleIndicator、PixelMapIndicator、RectFIndicator、RoundLinesIndicator组件。

2.以自定义轮播组件Banner和自定义指示器CircleIndicator举例:

import { Banner,BannerOptions,AnimatedEnum,IndicatorConfig, CircleIndicator,SwiperIndicator,IData,BannerMargin,AnimatedConfig } from '@ohos/banner'

export class Data implements IData{
  str:string = '';
}

@Entry
@ComponentV2
struct BannerSamplePage {
  private swiperController: SwiperController = new SwiperController()
  private touTiaoSwiperController: SwiperController = new SwiperController()
  @Local data: IData[] = []

  @Local indicatorConfig: IndicatorConfig = new IndicatorConfig(10, 0, '#5CB85C', '#FFFFFF')
  @Local bannerSize:number = 10;

  @Local autoPlay?:boolean = true // 自定播放
  @Local indicator?:SwiperIndicator = { bool:false } // 系统的指示器配置 不启用设置false
  @Local loop?:boolean = true // 是否开启循环
  @Local vertical?:boolean = false // 是否纵向滑动

  @Local interval?:number = 3000 // 当前item停滞时间
  @Local duration?:number = 800 // 子组件切换动画时长
  @Local bannerMargin:BannerMargin = {left:40, right:40};// 水平是左右的margin,垂直为上下的margin

  @Local