# Goods List 商品列表

## 介绍

Goods List 商品列表

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "goods-list": "/components/goods-list/index"
  }
}
```

### 基础用法

默认是纵向滚动`vertical`布局

```html
<goods-list data="{{ data }}" />
```

<img width="320" alt="vertical" src="https://films.qq.com/mp-ip-commercialize/goods-layout-vertical.png">

设置横向滚动`horizontal`布局

```html
<goods-list data="{{ data }}" layout="horizontal" />
```

<img width="320" alt="horizontal" src="https://films.qq.com/mp-ip-commercialize/goods-layout-horizontal.png">

## API

### Props

| 参数         | 说明                                                          | 类型               | 默认值                               | 说明 |
| ------------ | ------------------------------------------------------------- | ------------------ | ------------------------------------ | ---- |
| data         | 商品数据                                                      | _Arrary_           | -                                    | 必填 |
| layout       | 商品列表布局，横向滚动`horizontal`、纵向滚动`vertical`        | _string_           | `vertical`                           | 选填 |
| thumb-mode   | 图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_           | `aspectFit`                          | 选填 |
| thumb-width  | 商品图片宽度参数                                              | _string \| number_ | `横向滚动：302rpx、纵向滚动：342rpx` | 选填 |
| thumb-height | 商品图片高度参数                                              | _string \| number_ | `横向滚动：302rpx、纵向滚动：342rpx` | 选填 |

### Events

| 事件名     | 说明         | 回调参数 |
| ---------- | ------------ | -------- |
| bind:click | 点击商品卡片 | event    |

### 外部样式类

| 类名               | 说明           |
| ------------------ | -------------- |
| custom-class       | 根节点样式类   |
| thumb-class        | 左侧图片样式类 |
| title-class        | 标题样式类     |
| price-class        | 价格样式类     |
| origin-price-class | 划线原价样式类 |