@retailwe/ui-goods-list NPM

goods-list 商品卡片

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "wr-goods-card": "@retailwe/ui-goods-list/index"
}

代码演示

基础用法

Page({
  data: {
    goodsList: [] as any,
  },
  onLoad() {
    const data = [
      {
        thumb: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title:
          '智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦,智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦',
        price: '99.99',
        originPrice: '9.99',
        tags: ['热卖'],
      },
    ];
    const lists = Array.from({ length: 5 }, (_v, k) => data[k % data.length]);
    this.setData({
      goodsList: lists,
    });
  },
});

<goods-list goodsList="{{goodsList}}"></goods-list>

卡片垂直布局

<goods-list goodsList="{{goodsList}}" layout="vertical"></goods-list>

API

Props

参数	说明	类型	默认值	说明
id	组件ID	string	`gl-88888888`	默认取`gl-${~~(Math.random() * 10 ** 8)}`
goods-list	商品列表数据源	Good[]	-	结构参考下方说明
layout	卡片布局	string	`horizontal`	横向-`horizontal`、横向&价格与标题不同行-`horizontal-wrap`、纵向-`vertical`
price-fill	价格是否保持两位小数	boolean	`false`	-
show-cart	是否展示购物车	boolean	true	选填
lazy-load	是否开启图片懒加载	boolean	`true`	-
cart-size	购物车大小，透传给add-cart组件size	number	48	选填
cart-color	购物车颜色，透传给add-cart组件color	string	#FA550F	选填
thresholds	元素可见监控阈值	number[]	[]	选填，不填或填为空数组时不进行监控，进行监控后每达到一个阈值就触发一次事件：ob

Good

参数	说明	类型	默认值	说明
thumb	预览图	string	-	选填
num	商品数量	number	-	选填
title	商品标题	string	-	选填
lineClamp	标题多行溢出数量	number	1	2	默认值规则：当 tags 数量大于0 且显示时，默认值为1；当 tags 数量等于0 或不显示时，默认值为2
desc	商品描述	string	-	选填
specs	商品规格,字符串，单个规则超过5个字就...	string[]	-	选填
tags	商品标签，位于desc区域	string[]	-	选填
price	商品价格，单位分，整数	number	-	选填
originPrice	商品划线价格，单位分，整数	number	-	选填
hideKey	传入哪个key，哪个key对应的内容就则不显示	Record<keyof Good, boolean>	-	选填
currency	货币符号	string	`¥`	-
string	其他任意键值, 扩展结构用于其他业务目的	any	-	选填

Events

Event	Description	Arguments
thumb	点击商品预览图触发	{ ...goods-card.thumb, index: number }
specs	点击商品规格显示区触发	{ ...goods-card.specs, index: number }
tag	点击商品标签触发	{ ...goods-card.tag, index: number }
click	点击商品卡片触发	{...goods-card.click, index: number}
addcart	点击商品加购按钮触发	{...goods-card.add-cart, index: number}
ob	设置了thresholds且商品卡片的可见比例达到阈值	{...goods-card.ob, index: number}

外部样式类

类名	说明
wr-class	根节点样式类
title-class	title 节点样式类
desc-class	desc 节点样式类
num-class	num 节点样式类
thumb-class	预览图样式类
specs-class	规格节点样式类
price-class	price 节点样式类
origin-price-class	原价 price 节点样式类
price-prefix-class	价格前附加字符样式类

CSS Var

类名	属性	说明	默认值(不同的layout可能会不同)
--ui-goods-list-bg	background	商品列表背景	-
--ui-goods-list-padding	padding	商品列表 padding	-
--ui-goods-list-card-margin-bottom	商品卡片底部margin	-
--ui-goods-list-card-border-bottom	商品卡片底部border	-
--ui-goods-list-last-card-border-bottom	最后一个商品卡片底部border	-