Posted on Jun 14

Implementing Vertical Carousel Notifications in HarmonyOS Next

To achieve the automatic vertical scrolling effect for text in ArkUI, the Swiper component can be used. The Swiper component provides the capability to display content in a sliding carousel. As a container component, Swiper can carousel through its child components when multiple ones are configured.

1. Vertical Carousel Implementation

Swiper() { ForEach(this.transactionList, (item: TransactionInfo) => { Row() { Image(StrUtil.isBlank(item.TitleImage) ? $r("app.media.icon_circular_default_head") : item.TitleImage) .width(44) .height(44) .borderRadius(22) Text(item.Title) .fontSize(14) .fontColor($r("app.color.text_one")) .maxLines(2) .ellipsisMode(EllipsisMode.END) .textOverflow({ overflow: TextOverflow.Ellipsis }) .lineHeight(22) .margin({ left: 9 }) .layoutWeight(1) }.onClick(() => { ToastUtil.showToast("Clicked on transaction report") }) }) } .vertical(true) // Enable vertical carousel direction .loop(true) // Enable loop playback .autoPlay(true) // Enable auto-play .indicator(false) // Whether to show navigation dots .height(44) .margin({ left: 9 }) .layoutWeight(1)

Key Properties:

vertical: When true, the carousel slides vertically; when false, it slides horizontally (default: false).
loop: Controls whether the carousel loops (default: true).
autoPlay: Enables automatic carousel of child components (default: false, interval: 3000ms).
interval: Carousel interval in milliseconds (default: 3000ms).
indicator: Whether to display navigation dots.

2. Implementing a Custom Dialog

Use the @CustomDialog decorator to create a custom dialog where you can define the dialog's content, add confirm/cancel buttons, and include data functions.

import { StrUtil } from "@pura/harmony-utils" import { TransactionInfo } from "../model/TransactionInfo" @Preview @CustomDialog export struct DealInfoDialog { dealDialogController?: CustomDialogController @Prop transaction?: TransactionInfo = undefined build() { Column() { Text("Breaking News: Important Announcement") .width("60%") .margin({ top: 92 }) .fontSize(16) .fontWeight(600) .fontColor($r("app.color.yellow_aureus")) .textAlign(TextAlign.Center) Row() { Image(StrUtil.isBlank(this.transaction?.TitleImage) ? $r("app.media.placeholder") : this.transaction?.TitleImage).width(68).height(68).borderRadius(6) Column() { Text(this.transaction?.Title) .fontSize(13) .fontWeight(600) .fontColor($r("app.color.yellow_aureus")) .maxLines(1) .width("70%") .ellipsisMode(EllipsisMode.END) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text("Property ID: " + StrUtil.toStr(this.transaction?.PropertyNo)) .fontSize(12) .fontColor($r("app.color.yellow_aureus")) Row() { Text(this.transaction?.Price.toString()).fontColor("#DC2424").fontSize(18).fontWeight(800) Text("CNY").fontColor("#DC2424").fontSize(12).fontWeight(600).baselineOffset(-2) }.backgroundColor($r("app.color.yellow_aureus")) .padding({ left: 10, right: 10, top: 1, bottom: 1 }) .borderRadius(4) }.height(68) .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.SpaceBetween) .margin({ left: 12 }) }.width("65%") .margin({ top: 14 }).alignItems(VerticalAlign.Top) Text(this.transaction?.ShareInfo) .width("65%") .margin({ top: 20 }) .fontSize(13) .fontColor($r("app.color.yellow_aureus")) } .width("100%") .height(529) .backgroundImage($r("app.media.icon_deal_dialog_bg")) .backgroundImageSize({ width: "100%", height: "100%" }) } }

Create a Controller to Link with the Decorator:

this.dealDialogController = new CustomDialogController({ builder: DealInfoDialog({ transaction: this.transaction }), alignment: DialogAlignment.Center, customStyle: true, offset: { dx: 0, dy: -20 }, maskColor: 0x66000000 })