# CurtainJs

**Repository Path**: openharmony-tpc/CurtainJs

## Basic Information

- **Project Name**: CurtainJs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-09-17
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [CurtainJs](https://gitcode.com/openharmony-tpc/CurtainJs)。| ⚠️ This repository has been archived. For the new address, please visit [CurtainJs](https://gitcode.com/openharmony-tpc/CurtainJs).**
>
---
>
# CurtainJs

# 项目介绍
一个高亮蒙层库:
- 1.可以一次完成某个View,或者多个View的高亮展示
- 2.支持基于如List的listitem以及item中元素的高亮
- 3.可以自定义高亮形状
- 4.高亮区域支持自定义大小、样式，操作灵活
- 5.使用简单，流程清晰

# 效果演示

   | [Used-in-view] | [Used-in-drawer] | 
   |:-:|:-:|
   | ![view_link] | ![drawer_link] |
   
   
  
   
   | [Used-in-listview] | [Used-in-gridview] |  
   |:-: |:-:|
   | ![listview_link]  | ![gridview_link] |
   
   
   

   | [Used-in-recyclerview] | [curtain-Flow] |  
   |:-:|:-:|
   | ![recyclerview_link] | ![curtain_flow_link] |
   
   
# 使用方式

### 1.HML布局页面
主界面：
```hml
<element name="recyviews" src="../recysample/recyviews.hml"></element>

<stack class="container">

    <recyviews @event-type1="childToParentClicked" id="recyContentView"></recyviews>


    <canvas class="shadowHighLight" id="hilightCanvas"
            show="{{ canShow }}"
            on:touchstart.bubble="dissMiss"></canvas>

</stack>
```

自定义组件-recyviews：
```hml
<div class="container">
    <list class="todo-wraper" divider="false" indexer="false" scrolleffect="fade"
          onscroll="dispatchScroll"
          ontouchstart="dispatchTouch"
          id="listView"
          scrollpage="true" scrollbar="off">
        <list-item for="{{ (index, value) in todolist }}" class="todo-item" id="item-{{ index }}"
                   grab:click="{{ onItemClick(index, value) }}">
            <div class="itemContentStyle">
                <image class="avatarStyle" src="../../common/images/ic_launcher.png" id="img-{{ index }}"></image>
                <text class="todo-title" id="text-{{ index }}">{{ value }}</text>
            </div>
            <div style="width : 100%; height : 1px; background-color : gray; margin-top : 8px;"></div>
        </list-item>
    </list>


</div>

``` 
主界面主要是引入自定义组件，以及外层覆盖用于显示高亮蒙层的canvas，由于没有使用slot，
当前版本使用本库代码较为麻烦，后续会将主界面的自定义组件插入部分设为slot，自定义组件将通过slot插槽插入其中，
蒙层高亮部分的代码放在库里面，引用的部分则只需要提供相关配置参数即可。

- 1.1 当前使用需要根据高亮需求找到相关的sample的hml,css,js代码并拷贝，然后替换主界面引用部分的hml为自定义组件的hml。
- 1.2 自定义组件如果要在打开界面的瞬间显示高亮蒙层，则需要在js文件里面实现initHighLightData方法。
- 1.3 自定义组件添加高亮参数，相关方法addItemToList。
- 1.4 自定义组件滑动，点击等事件回调主界面，如下：
自定义组件部分---
```javascript
         context.$emit('eventType1', {
                        type: "showItem",
                        canShow: true,
                        canvasColor: context.canvasColor,
                        list: context.configList
                    });

``` 
主界面部分---
```hml
<recyviews @event-type1="childToParentClicked" id="recyContentView"></recyviews>

``` 
```javascript
    childToParentClicked(e) {
        const context = this
        context.canShow = e.detail.canShow
        let type = e.detail.type
        if (type == "showItem") {
            context.showItemHighLight(e)
        }
    },
``` 
通过参数里自定义的type来区分滑动事件，点击事件，显示、隐藏蒙层事件等。

- 1.5 主界面绘制高亮蒙层，主要方法是beginShow，在这里绘制高亮部分(圆形 方形)，绘制文字，绘制曲线箭头，绘制按钮，添加点击事件。 
- 1.6 主界面返回按钮关闭蒙层或者退出界面，重写onBackPress方法。 
   
   
   
   [view_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Fview_link.gif&isFile=true>
   [drawer_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Fdrawer_link.gif&isFile=true>
   [listview_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Flistview_link.gif&isFile=true>
   [gridview_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Fgridview_link.gif&isFile=true>
   [recyclerview_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Frecyclerview_link.gif&isFile=true>
   [curtain_flow_link]: <https://codehub-y.huawei.com/opensource_insight/JSComponent/CurtainJs/files?ref=master&filePath=screenshot%2Fcurtain_flow_link.gif&isFile=true>