# mailList

**Repository Path**: queling/mailList

## Basic Information

- **Project Name**: mailList
- **Description**: 通讯录组件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-19
- **Last Updated**: 2021-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 通讯录
## 项目介绍
- 项目名称：通讯录
- 功能：侧滑、首字母索引
## 效果演示
![](./img/page1.gif)

![](./img/page2.gif)

![](./img/page3.gif)
## 安装教程
在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行。
### 项目目录
![](./img/2.png)
### 组件接口
### props接口数据
- mail-list：列表数据
- left-btn-list: 左划按钮数据
- rigth-btn-list: 右滑按钮数据
- overscroll-effect： 列表滚动边缘效果
- is-show-letter: 是否展示字母索引
- distance-top-heigth: 列表距离顶部的距离
#### 事件
- clickInfo：点击每个列表触发事件
- clickBtn：点击左右按钮触发事件
### 使用说明
- 下载项目，复制common\component下组件到自己的项目中
- 引入组件
```html
<element name="mail_list"  src="../../common/component/mail_list/mail_list.hml"></element>
```
- 使用组件
```html
<div class="container">
    <mail_list
            id="mail_list" 
            mail-list="{{ mailList }}"
            is-show-letter="{{ false }}"
            overscroll-effect="fade"
            @click-info="clickInfo"
            ></mail_list>
</div>
```
- 初始化组件
```js
    onReady() {
        this.$child('mail_list').myInit();
    }
```
- 刷新组件
```js
    this.mailList = newMailList;
    setTimeout(() => {
        this.$child('mail_list').myInit();
    }, 0)
```