# secondfloor

**Repository Path**: tianpeng777/secondfloor

## Basic Information

- **Project Name**: secondfloor
- **Description**: 公开
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 0
- **Created**: 2023-12-15
- **Last Updated**: 2025-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, 二楼, secondfloor

## README

# SecondFloor
## 简介
> SecondFloor是一款OpenHarmony环境下可用的二楼组件。 方便全屏下实现下拉二楼效果。
## 效果展示
![输入图片说明](floor.gif)

## 安装
> ohpm install secondfloor
## 使用说明

```typescript
import { FloorConfig, SecondFloor } from '@ohos/secondfloor'

@Entry
@Component
struct Index {
  message: string = 'Hello World'
  @State dataSet: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  private listScroller: Scroller = new Scroller();
  /**
   * 二楼配置
   */
  private mFloorConfig: FloorConfig = new FloorConfig()
  /**
   * 注册手动收起二楼的事件监听
   */
  @Provide startPackUpFloor: boolean = false;

  aboutToAppear() {
    this.mFloorConfig.setExpandFloorTriggerDistance(150)
    this.mFloorConfig.setPackUpFloorTriggerDistance(150)
  }

  build() {
    Column() {
      SecondFloor({
        mFloorConfig:this.mFloorConfig,
        mHomeView: this.mainPageBuilder.bind(this),
        mFloorView: this.floorViewBuilder.bind(this)
      })
    }.width('100%').height('100%')
  }

  /**
   * 二楼视图
   */
  @Builder floorViewBuilder() {
    Column() {
      Text("我是二楼顶部")
        .width('100%')
        .fontSize(16)
        .height(150)
        .backgroundColor(Color.Yellow)
        .textAlign(TextAlign.Center)
      Text("我是二楼中部")
        .width('100%')
        .fontSize(16)
        .layoutWeight(1)
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
      Column() {
        Image($r('app.media.app_icon'))
          .width(30)
          .aspectRatio(1)
          .objectFit(ImageFit.Contain)
        Text("点我收起二楼")
          .fontSize(16)
          .width(150)
          .textAlign(TextAlign.Center)
      }.width('100%')
      .backgroundColor(Color.Orange)
      .onClick(event => {
        this.startPackUpFloor = true
      })
    }.height('100%').width('100%')
  }

  /**
   * 首页视图
   */
  @Builder mainPageBuilder() {
    List({ scroller: this.listScroller }) {
      if (this.dataSet) {
        ForEach(this.dataSet, (item, index) => {
          ListItem() {
            this.itemAAALayout(item, index)
          }
          .width("100%")
        }, item => item)
      }
    }
    .width("100%")
    .height('100%')
    .padding({ left: 20, right: 20 })
    .edgeEffect(EdgeEffect.None)
  }

  @Builder itemAAALayout(item: number, index: number) {
    Row() {
      Text(item.toString())
        .width('100%')
        .height(100)
        .border({ radius: 20 })
        .margin({ top: 20, bottom: 20 })
        .backgroundColor('#cc66ff99')
        .textAlign(TextAlign.Center)
    }
  }
}
```
## 属性说明
### SecondFloor
| 属性           | 类型          | 含义       | 默认值               | 备注               |
|--------------|-------------|----------|-------------------|-------------------|
| mFloorConfig | FloorConfig | 二楼相关属性配置 | new FloorConfig() | 可传               |
| mHomeView    | () => void  | 首页视图     | undefined         | 必传               |
| mFloorView   | () => void  | 二楼视图     | undefined         | 必传              |

### FloorConfig
| 属性                          | 类型     | 含义              | 默认值               |
|-----------------------------|--------|-----------------|-------------------|
| mFloorHeight                | number | 二楼高度            | screenHeight:屏幕高度 |
| mExpandFloorTriggerDistance | number | 展开二楼拉拽距离        | 150vp               |
| mPackUpFloorTriggerDistance | number | 收起二楼拉拽距离        | 150vp               |
| mFlingFactor                | number | 阻尼系数            | 0.75              |
| mExpandIntervalTime         | number | 展开动画效果 时长，定时器常量 | 20ms                |
| mPackUpIntervalTime         | number | 收起动画效果 时长，定时器常量 | 20ms                |
|                             |        |                 |                   |

### SecondFloor
| 属性           | 类型          | 含义       | 默认值               |
|--------------|-------------|----------|-------------------|
| startPackUpFloor | boolean | 收起二楼手动开关 | false |

## 注意事项
1、api9在@builder模式下this关键字指向是最底层容器，非构建builder时所在容器，需注意。使用当前容器可用bind(this)；
    
    > 例如：mHomeView: this.mainPageBuilder.bind(this),

## 测试
在下述版本验证通过：

DevEco Studio: 3.1.1, SDK: API9，真机：mate40 

## 贡献代码
使用过程中发现任何问题都可以提 Issue 给我，当然，我们也非常欢迎你给我发 PR 。

## 开源协议
本项目基于 Apache License 2.0 ，请自由地享受和参与开源。

## 遗留问题
1、在模拟器下运行，全屏幕状态 api9下总视图会下滑大概一个statusbar的高度，待官方修复
   > https://developer.huawei.com/consumer/cn/forum/topic/0201132943204049107?fid=0101587866109860105

2、下拉展开二楼和上滑收起二楼对外回调暂时未添加

3、暂不支持refresh，待后续添加