# CustomWaterView

**Repository Path**: xinjiankang/CustomWaterView

## Basic Information

- **Project Name**: CustomWaterView
- **Description**: 自定义仿支付宝蚂蚁森林水滴控件,提供了JAVA UI和JS UI两种实现方式
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-07-28
- **Last Updated**: 2021-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CustomWaterView
## 项目介绍
* 项目名称：CustomWaterView
* 所属系列：OpenHarmony的第三方组件适配移植
* 功能：自定义仿支付宝蚂蚁森林水滴控件,提供了JAVA UI和JS UI两种实现方式
* 项目移植状态：主功能完成
* 调用差异：无
* 开发版本：sdk6，DevEco Studio 2.2 Beta1
* 基线版本：master分支
## 效果演示：
 ![](gif/CustomWaterView.gif)
 
 
 ## 安装教程
 在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行。
 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 
 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下
 
## 使用说明
*  JAVA UI使用方式：

1、在demo中通过布局添加组件
```

    <StackLayout
        ohos:id="$+id:sl_container"
        ohos:height="400vp"
        ohos:background_element="$media:bg"
        ohos:width="match_parent">
        <com.stx.xhb.customwaterview.components.WaterFlake
            ohos:id="$+id:waterFlake"
            ohos:height="match_parent"
            ohos:width="match_parent"/>
    </StackLayout>
    <Button
        ohos:id="$+id:btnRest"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20vp"
        ohos:text="重置"
        ohos:padding="15vp"/>
```
2、在AbilitySlice中调用对应api实现不同功能
```
  btnRest.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                mWaterFlake.resetComponent();
            }
        });
        mWaterFlake.setOnWaterItemListener(new WaterFlake.OnWaterItemListener() {
            @Override
            public void onItemClick(WaterModel pos) {
                new ToastDialog(getContext()).setText("点击了" + pos.getContent()).show();
            }
        });

  mWaterFlake.setModelList(mModelList);

    // 设置收集动画结束点的位置
   mWaterFlake.updateCollectionPosition(0, 1200);
```

*  JS UI使用方式：
1、引入default/common/component/waterflake目录下的组件,绑定小球点击事件@ball-click="onBallClick"
```
<element name='waterFlake' src='../../../default/common/component/waterflake/waterFlake.hml'></element>
<div class="container">
    <div class="forestContainer">
        <waterFlake ball-list="{{ ballList }}" @ball-click="onBallClick"></waterFlake>
    </div>
    <button style="padding : 20px; align-content : center; background-color : #222222;"
            onclick="reset">重置
    </button>

</div>
```

2、给组件绑定以下参数：
```
  props: {
    //后台返回的小球信息
        ballList: {
            default: [10, 11, 12, 13, 14],
        },
    // 收集能量动画结束的X坐标
        collDestinationX: {
            default: 0
        },
    // 收集能量动画结束的Y坐标
        collDestinationY: {
            default: 600
        }
    },

```
3、接收小球的点击事件：
```
onBallClick(info) {
        console.info('xwg parent  onBallClick item = ' + JSON.stringify(info.detail));
    },
```

## 版本迭代
0.0.1-SNAPSHOT

## 测试信息
CodeCheck代码测试无异常 

CloudTest代码测试无异常  

病毒安全检测通过 

当前版本demo功能与原组件基本无差异 

## 版权和许可信息

    Copyright (C) 2016 xhb_199409@163.com

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.