@mas.io/mas-multiple-cards NPM

安装

tnpm install --save @alipay/mas-multiple-cards

行业小程序民生通用卡片组件，结合小程序卡片的组件样式，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

属性	必填	参数类型	参数说明	默认值	示例
mode	N	string	卡片展示样式（''\normal\small\multiple）	''	优惠出行
title	N	string	服务title，没有则不展示	''	优惠出行
data	Y	array	列表数据	[]	[]
moreText	N	string	更多文案配置，没有不展示	''	更多
className	N	string	class	''	--
onClickMore	N	fun	点击更多钩子	() => {}	--
onClickItem	Y	fun	点击item钩子	(item) => {}	--

属性	必填	参数类型	参数说明	默认值	示例
title	N	string	服务title，没有则不展示	''	邀好友得优惠
extra	N	string	服务描述	''	5元火车票优惠券
background	N	string	服务背景，可颜色，可背景图	''	--
btnText	N	string	按钮文案	--	去领取
type	N	string	按钮样式 (ghost\primary)	primary	ghost
color	N	string	按钮颜色 (blue\red\white\gray)	blue	--
disabled	N	boolean	是否可点击	false	--
childen	N	array	mode === multiple 时，第一个服务需要轮播，数据配置同data	[]	--
iconUrl	N	string	右边icon	''	--
lottie	N	object	右边 Lottie 动画	{}	--
images	N	array	右边轮播图片	[]	--

属性	必填	参数类型	参数说明	默认值	示例
imgUrl	N	string	图片地址	''	--

一字长排，如果 data 数据只有一条时，不管传入mode是什么，展示都是该模式。 npm.io

适用与数据量少，及有行动点功能场景。 npm.io

适用与数据量少，及无行动点功能场景。 npm.io

该模式下，如果数据只有一条，自动会调整 mode 为空模式，如果数据为两条，则会自动调整为 normal 模式。 npm.io

如需第一个服务轮播，则只需要在第一个数据里插入 childen 就行，实际轮播数量是第一个数据加 childen。 npm.io

{
  "usingComponents": {
    "mas-multiple-cards": "@alipay/mas-multiple-cards/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-multiple-cards
  title="出行优惠"
  mode="normal"
  data="{{ normalData }}"
  onClickItem="onClickItem"
/>

3 years ago