# SlidingLinkageLayout

**Repository Path**: caijiabin_sjz/sliding-linkage-layout

## Basic Information

- **Project Name**: SlidingLinkageLayout
- **Description**: SlidingLinkageLayout是一个自定义组件，支持页面Scroll组件与List组件的联动滑动并支持吸顶。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-09-06
- **Last Updated**: 2024-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# SlidingLinkageLayout

SlidingLinkageLayout是一个自定义组件，支持页面Scroll组件与List组件的联动滑动并支持吸顶。

## 简介

 组件分为上下两部分内容区域，上半部分可自由滑动，滑动到底部可以带动下半部分向上滑动
 ，当下班部分触顶后可以吸顶，吸顶后下半部分的List组件可触发滑动，在未吸顶时，
 下半部分的区域会整体滑动，不会触发List组件的滑动，只有在吸顶之后List组件才可以触发滑动，
 如果List组件滑动到顶部，会触发下半部分的整体滑动，同时吸顶状态下List组件向下滑动时，可带动上半部分内容区域想下滑动。

- 支持List组件
- 支持嵌套滑动
- 支持吸顶效果
- 组件样式可自由配置
- 代码开源，安全可信

## 演示

> ![img.gif](https://gitee.com/caijiabin_sjz/sliding-linkage-layout/raw/master/slidinglinkage/screenshots/Screenshot_light_1.gif)


## 使用
#### 下载安装

`ohpm i @caijiabin/slidinglinkage`

OpenHarmony ohpm
环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://ohpm.openharmony.cn/#/cn/help/downloadandinstall)
<br><br>
#### 参数说明

| 参数名          | 类型                     | 是否必须 | 描述                         |
|:-------------|:-----------------------|:-----|:---------------------------|
| headerLayout | any                    | 是    | 外部传入的头部布局                  |
| listItemLayout     | any                    | 是    | 外部传入的List组件的item布局         |
| mainBgColor     | string / ResourceColor | 否    | 主背景颜色，默认值：Color.Gray       |
| floatWindowBgColor     | string / ResourceColor | 否    | 底部浮动窗背景颜色，默认值：Color.White  |
| listBgColor     | string / ResourceColor | 否    | List组件背景颜色，默认值：Color.White |
| scrollbottomheight     | number | 否    | 下半部分浮动窗距初始位置高度，默认值：0       |

#### 代码示例
```
  @Builder
  loadHeaderLayout(){
  ...
  }
   @Builder
  loadListItem() {
    ForEach(this.listDate, (text: number, i) => {
      ListItem() {
        Column() {
          Text(text + '')
            .fontSize(20)
        }
        .backgroundColor('#efefef')
        .alignItems(HorizontalAlign.Center)
        .padding(10)
        .width('100%')
        .onClick(() => {
          promptAction.showToast({ message: text + '' })
        })
      }
    })
  }
  SlidingLinkageLayout({ headerLayout: this.loadHeaderLayout,listItemLayout:(): void => { this.loadListItem() }})
```
+ 在使用时需要注意listItemLayout的布局，布局的数据是在父组件，包括数据展示点击事件等都交由父组件处理，所以在传递时要注意this指向问题，否则无法正常显示。
```
//错误写法
SlidingLinkageLayout({ headerLayout: this.loadHeaderLayout,listItemLayout: this.loadListItem})
//正确写法
SlidingLinkageLayout({ headerLayout: this.loadHeaderLayout,listItemLayout:(): void => { this.loadListItem() }})
```
## 注意事项

本项目仅供学习交流使用，禁止用于商业用途或非法用途！

## 开源协议

本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) ，请自由地享受和参与开源。   
拷贝和借鉴代码，还请大家在引用时注明出处，万分感谢。