以九宫格形式展示一张或多张图片

/ 详情

意向

需求

创建于

2021-09-03 10:56

标题：

以九宫格的形式展示单张或者多张图片，通过card标签即可引入使用

仓库地址：

https://gitee.com/wuhaiping123/carddisplay_js

作者 ID（请填写报名时填写的姓名）：

吴海平

作品效果图（不少于 3 张，有视频效果更佳）

预览一

效果图

预览二

效果图

预览三

效果图

项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

以九宫格的形式展示单张或者多张图片，图片超过一定的数量之后多出来的部分以数字的形式显示到九宫格的最后一张上面，后续还可以有更多的扩展性

创建了需求

将关联仓库设置为Gitee/OpenHarmony组件开发大赛

修改了描述

原值

### 标题：

```

以九宫格的形式展示单张或者多张图片，通过card标签即可引入使用

```

### 仓库地址：

```

https://gitee.com/wuhaiping123/carddisplay_js

```

### 作者 ID（请填写报名时填写的姓名）：

```

吴海平

```

### 作品效果图 （不少于 3 张，有视频效果更佳）

#### 预览一

```

https://gitee.com/wuhaiping123/carddisplay_js/blob/master/screenshot/CardDisplay.gif

```

#### 预览二

```

https://gitee.com/wuhaiping123/carddisplay_js/blob/master/screenshot/pic1.PNG

```

#### 预览三

```

https://gitee.com/wuhaiping123/carddisplay_js/blob/master/screenshot/pic2.PNG

```

### 项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

```

以九宫格的形式展示单张或者多张图片，图片超过一定的数量之后多出来的部分以数字的形式显示到九宫格的最后一张上面，后续还可以有更多的扩展性

```

新值

### 标题：

```

以九宫格的形式展示单张或者多张图片，通过card标签即可引入使用

```

### 仓库地址：

```

https://gitee.com/wuhaiping123/carddisplay_js

```

### 作者 ID（请填写报名时填写的姓名）：

```

吴海平

```

### 作品效果图 （不少于 3 张，有视频效果更佳）

#### 预览一

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/CardDisplay.gif)

```

#### 预览二

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic1.PNG)

```

#### 预览三

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic2.PNG)

```

### 项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

```

以九宫格的形式展示单张或者多张图片，图片超过一定的数量之后多出来的部分以数字的形式显示到九宫格的最后一张上面，后续还可以有更多的扩展性

```

修改了描述

原值

### 标题：

```

以九宫格的形式展示单张或者多张图片，通过card标签即可引入使用

```

### 仓库地址：

```

https://gitee.com/wuhaiping123/carddisplay_js

```

### 作者 ID（请填写报名时填写的姓名）：

```

吴海平

```

### 作品效果图 （不少于 3 张，有视频效果更佳）

#### 预览一

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/CardDisplay.gif)

```

#### 预览二

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic1.PNG)

```

#### 预览三

```

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic2.PNG)

```

### 项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

```

以九宫格的形式展示单张或者多张图片，图片超过一定的数量之后多出来的部分以数字的形式显示到九宫格的最后一张上面，后续还可以有更多的扩展性

```

新值

### 标题：

```

以九宫格的形式展示单张或者多张图片，通过card标签即可引入使用

```

### 仓库地址：

```

https://gitee.com/wuhaiping123/carddisplay_js

```

### 作者 ID（请填写报名时填写的姓名）：

```

吴海平

```

### 作品效果图 （不少于 3 张，有视频效果更佳）

#### 预览一

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/CardDisplay.gif)

#### 预览二

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic1.PNG)

#### 预览三

![效果图](https://gitee.com/wuhaiping123/carddisplay_js/raw/master/screenshot/pic2.PNG)

### 项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

```

以九宫格的形式展示单张或者多张图片，图片超过一定的数量之后多出来的部分以数字的形式显示到九宫格的最后一张上面，后续还可以有更多的扩展性

```

展开全部操作日志

666

👍

赞👍

666

学习

牛

666

牛，杠杠的👍🏻 👍🏻

赞👍

怎么做到的，这么厉害

👍🏻

给力

👍

666

good

666

👍

登录后才可以发表评论

状态

负责人

项目

里程碑

Pull Requests

关联的 Pull Requests 被合并后可能会关闭此 issue

分支

开始日期 - 截止日期

置顶选项

优先级

预计工期（小时）

参与者（23）

加载更多

https://gitee.com/gitee-community/openharmony_components.git

git@gitee.com:gitee-community/openharmony_components.git

gitee-community

openharmony_components

OpenHarmony组件开发大赛

Gitee Community / OpenHarmony组件开发大赛

内容风险标识

标题：

仓库地址：

作者 ID（请填写报名时填写的姓名）：

作品效果图（不少于 3 张，有视频效果更佳）

预览一

预览二

预览三

项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

评论 (22)

Gitee Community / OpenHarmony组件开发大赛 .gitee-modal { width: 500px !important; }

内容风险标识

以九宫格形式展示一张或多张图片

标题：

仓库地址：

作者 ID（请填写报名时填写的姓名）：

作品效果图 （不少于 3 张，有视频效果更佳）

预览一

预览二

预览三

项目经过或者做这个组件的原因，简单的概述能让评委们更清楚的了解组件～

评论 (22)

搜索帮助

Gitee Community / OpenHarmony组件开发大赛

作品效果图（不少于 3 张，有视频效果更佳）