@mas.io/mas-list NPM

安装

tnpm install --save @alipay/mas-list

组件介绍

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

参数说明

属性	必填	参数类型	参数说明	默认值	示例
title	N	string	服务title，没有则不展示	''	优惠出行
data	Y	array	列表数据	[]	[]
moreText	N	string	更多文案配置，没有不展示	''	更多
exceeded	N	number	超过多少个隐藏, 0 则不隐藏	0	3
showAllText	N	string	展开更多文案	x个优惠	展开
className	N	string	class	''	--
onClickMore	N	fun	点击更多钩子	() => {}	--
onClickItem	Y	fun	点击item钩子	(item) => {}	--

data 参数说明

属性	必填	参数类型	参数说明	默认值	示例
title	N	string	服务title，没有则不展示	''	邀好友得优惠
extra	N	string	服务描述	''	5元火车票优惠券
iconUrl	N	string	服务icon	''	--
btnText	N	string	按钮文案	--	去领取
type	N	string	按钮样式 ghost ｜ primary	primary	ghost
color	N	string	按钮颜色 blue ｜ red	blue	--
disabled	N	boolean	是否可点击	false	--

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-list
  title="{{ title }}"
  data="{{ list }}"
  exceeded="3"
  onClickMore="onClickMore"
  onClickItem="onClickItem"
  moreText="更多"
/>

Badges

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.0

3 years ago