# WUI-React

**Repository Path**: wgmgitee/wui-react

## Basic Information

- **Project Name**: WUI-React
- **Description**: WUI-React是一个React框架组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-07
- **Last Updated**: 2023-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍

WUI-React是一个React框架组件库，提供开箱即用组件及常见业务组件设计思路，目前支持的组件如下：

- 滑动拼图安全验证组件
- 虚拟滚动列表(移动端)
- 上拉触底加载列表(移动端)
- 下拉刷新
- 商品项目(移动端)
- 购物车项目(移动端)
- 加载更多
- Tabs标签栏

...

# umi project

## Getting Started

Install dependencies,

```bash
$ yarn
```

Start the dev server,

```bash
$ yarn start
```

# 示例

## 滑动拼图验证组件

### 描述
主要由三部分组成：背景图、缺口、滑块。<br/>
缺口怎么生成？其实是一个阴影块，在背景图内随机进行绝对定位偏移。<br/>
滑块怎么生成？滑块大小=阴影块大小，通过background-position偏移(这里的偏移量=缺口块的偏移量)，只展示滑块范围的图片，其余部分隐藏，在视觉上就形成了一个和缺口相同的滑块。<br/>
当滑动滑块与缺口位置重合，验证通过。<br/>
怎么判断重合？两者之间的距离=拖动的距离。<br/>

支持自定义标题、图片组、设置误差范围、设置拼图块/缺口大小、主动刷新、校验失败自动刷新。<br/>

### 参数说明

| 字段名              | 字段类型                | 默认值      | 说明                       |
| ------------------ | ---------------------- | ---------- | -------------------------------------- |
| bigBCol            | string                 |            | 大容器背景颜色                            |
| leftWidth          | number                 |            | 左侧空白区域宽度                          |
| num                | number                 |            | 允许的误差                               |
| imgWidth           | number                 |            | 背景图片宽度                              |
| imgHeight          | number                 |            | 背景图片高度                              |
| moveImgBlockWidth  | number                 |            | 拼图块宽度 拼图块大小=缺口大小               |
| moveImgBlockHeight | number                 |            | 拼图块高度 拼图块大小=缺口大小               |
| picList            | string[]               |            | 背景图片                                  |
| tip                | string、React.ReactNode |            | 提示标题                                 |


### 事件

| 事件名  | 说明                 | 回调参数 |
| ------- | -------------------- | -------- |
| success | 验证完成后的回调函数 | -        |

### 方法(通过refs调用的组件本身的方法)

| 事件名 | 说明                   | 参数 |
| ------ | ---------------------- | ---- |
| reset  | 使验证器重置为初始状态 | -    |

### 下面是搭配React-Vant的Popup组件的使用效果：

![1](https://gitee.com/wgmgitee/public/raw/master/images/verify.png)

## 虚拟滚动列表
### 描述
效果是：当用户滚动列表时，只呈现可见区域的列表项，而不是整个列表，以达到减少渲染、节约性能的效果。

核心是：
- 1.在滚动事件里动态计算出应该在可视区域展示的起点、终点位置，
- 2.用起点索引和终点索引去截取数据进行展示
- 3.通过动态计算设置padding-top 和 padding-bottom，替代那些不需要渲染的元素，由此保证虚拟列表是可以滚动的，而且滚动条位置和列表元素位置是相对应的。

坑点：内层容器不能定死高度，而是动态计算设置padding-top 和 padding-bottom撑开。

起点索引 = 卷去的高度scrollTop 除以 单个列表项高度，向下取整

终点索引 = 起点索引 + 可见的列表项数量

padding-top = 开始索引 * 单个列表项高度

padding-bottom = (总数据.length - 终点索引) * 单个列表项高度

### 参数说明

| 字段名              | 字段类型                | 默认值      | 说明                       |
| ------------------ | ---------------------- | ---------- | -------------------------------------- |
| items              | []                     |            | 列表数据                               |
| itemHeight         | number                 |            | 单个列表项的高度                       |
| visibleItems       | number                 |            | 可见的列表项数量                       |                            |


## 上拉触底加载列表组件
利用content-visibility: auto 提升渲染性能。
以demo为例，首次渲染20000条数据，使用content-visibility: auto 渲染时间600ms；不使用时，渲染时间1100ms；
提升性能约54%。

content-visibility属性有三个可选值:
- visible: 默认值。对布局和呈现不会产生什么影响。
- hidden: 元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了display: none属性。
- auto: 对于用户可见区域的元素，浏览器会正常渲染其内容；对于不可见区域的元素，浏览器会暂时跳过其内容的呈现，等到其处于用户可见区域时，浏览器在渲染其内容。

问题：该属性比较新，兼容性不好

## 下拉刷新组件
### 描述

### 事件

| 事件名  | 说明                 | 回调参数 |
| ------- | -------------------- | -------- |
| startRefresh | 刷新 | -        |

### 方法(通过refs调用的组件本身的方法)

| 事件名 | 说明                   | 参数 |
| ------ | ---------------------- | ---- |
| stopRefreshing  | 结束刷新 | -    |