# HshareFlipper

**Repository Path**: hshare/hshare-flipper

## Basic Information

- **Project Name**: HshareFlipper
- **Description**: HshareFlipper是一款可以让自定义视图自动上下滚动的跑马灯View，适用于在限定区域内展示新闻、通知、广告等列表信息，视图的布局和滚动效果可以根据需求进行自定义，以适应不同的应用场景。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-03-07
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HarmonyNEXT

## README

# HshareFlipper



### 介绍

HshareFlipper是一款可以让自定义视图自动上下滚动的跑马灯View，适用于在限定区域内展示新闻、通知、广告等列表信息，视图的布局和滚动效果可以根据需求进行自定义，以适应不同的应用场景。

### 效果图预览

![hshareflipper.gif](hshare_flipper%2Fexample%2Fhshareflipper.gif)

### 下载安装

执行安装命令

```typescript
ohpm install @hshare/hshare-flipper
```

### 快速使用

1.定义HshareFlipper的属性
```typescript
options: FlipperOptions = FlipperOptionsBuilder.getInstance()
  .setHeight(25)//View高度
  .setInterval(1500)//上下滚动间隔，单位为毫秒
  .setAnimateParam(500)//动画持续时间，单位为毫秒
  .setOnItemClicked((item: HotSellBean, index: number) => {
    //item点击事件
    item.isRead = true
    promptAction.showToast({
      message: "" + item.text
    })
  })
  .setOnItemScrolled((item: HotSellBean, index: number) => {
    //滚动事件
    console.log(item.text + "    " + index)
  })
  .build()
```
2.根据需求定义数据Bean
```typescript
export class BankAdBean {
  type: string = '热点'
  isRead: boolean = false
  text: string = ""

  constructor(type: string, text: string, isRead: boolean = false) {
    this.type = type
    this.isRead = isRead
    this.text = text
  }
}
```
3.添加数据源
```typescript
@State bankAdBeans: BankAdBean[] = []

aboutToAppear(): void {
  this.bankAdBeans.push(new BankAdBean('热点', '邀请码炒到近十万元！Manus爆火'))
  this.bankAdBeans.push(new BankAdBean('热门', '养老新福利！普惠养老服务新政策发布'))
  this.bankAdBeans.push(new BankAdBean('策略', '基金亏损，如何科学补仓？'))
  this.bankAdBeans.push(new BankAdBean('基金', '无需盯盘，黄金活期能委托下单啦>>'))
}
```
4.在布局中添加HshareFlipper
```typescript
Column() {
  // 其他布局...
  
  Row() {
    FlipperView({
      options: this.options,
      sourceBeans: this.bankAdBeans,
      itemContentView: (data: BankAdBean, index: number) => {
        this.itemContentView(data, index)
      }
    })
      .layoutWeight(1)
  }
  .borderRadius(6)
  .backgroundColor('#ffffff')
  .padding({
    left: 10,
    right: 10,
    top: 5,
    bottom: 5
  })
  .margin({ top: 20, left: 20, right: 20 })

  // 其他布局...
}
.alignItems(HorizontalAlign.Start)
.height('100%')
.width('100%')
.backgroundColor('#f0f0f0')
```

5.自定义Item的布局
```typescript
@Builder
itemContentView(item: BankAdBean, index: number) {
  Text(item.type)
    .backgroundColor('#fff9dbdb')
    .fontSize(11)
    .fontColor('#fff85656')
    .borderRadius(2)
    .padding({
      top: 2,
      bottom: 2,
      left: 4,
      right: 4
    })
  Text(item.text)
    .margin({ left: 10 })
    .fontColor('#666666')
    .fontSize(14)
    .layoutWeight(1)
  Circle({ width: 4, height: 4 })
    .fill('#fff34a55')
    .visibility(item.isRead ? Visibility.Hidden : Visibility.Visible)
    .margin({ left: 10, right: 5 })
}
```

## 开源协议

本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) ，在拷贝和借鉴代码时，请大家务必注明出处。