@mas.io/mas-marketing-card NPM

安装

tnpm install --save @alipay/mas-marketing-card

组件介绍

营销卡片组件，支持1X2、1X3 、有无轮播等布局。用户可自定义卡片背景、按钮样式。1X2卡片支持标题与图片轮播

参数说明

属性	参数类型	必填	参数说明
type	String	true	卡片布局样式: double 为 1X2布局 , triple为 1X3布局
className	String	false	自定义卡片class
tipsClassName	String	false	自定义卡片按钮class
isTipsShow	Boolean	false	卡片是否显示按钮，默认值：true
isBottomSwiperShow	Boolean	false	卡片是否显示轮播，默认值：false
list	Array<{backgroundUrl:stringtitle:stringsubTitleList:ArraysubTitle:stringtipsTitle:stringlogoList:Arraylogo:string}>	true	卡片背景图地址—backgroundUrl卡片标题—title卡片副标题合集—subTitleList(如有此元素，多个文案会进行轮播）卡片副标题—subTitle,按钮文案—tipsTitle,卡片图片合集—logoList（如有此元素，多个图片会进行轮播),卡片图片—logo
swiperList	Array<{logo:string,title:string,moreText:string}>	false	轮播展示内容列表，最好先转化数据,logo:轮播图标图片,title:轮播文案,moreText:行动点文案
title	String	false	卡片标题
tipColor	String	false	卡片按钮文字颜色
interval	Number	false	自动切换时间间隔。(多个轮播效果存在时，共用此属性),默认值：500(ms)
moreText	String	false	底部轮播右侧行动点文案
slotName	String	false	卡片右下角图片插槽,可选值'double-0'(两位展示第一位) , 'double-1'(两位展示第二位) ,'triple-0'((三位展示第一位))
onClickCard	() => {}	false	点击卡片的点击事件
onChange	() => {}	false	底部轮播组件切换事件
onClickMore	() => {}	false	底部轮播组件行动点点击事件
onClickBottomSwiper	() => {}	false	底部轮播组件点击

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-marketing-card
    type="double"
    swiperList="{{swiperList}}"
    className="className"
    tipsClassName="tipsClassName"
    list="{{list}}"
    isTipsShow="{{false}}"
    isBottomSwiperShow="{{true}}"
    title="标题"
    onClickCard="onClickCard"
    onChange="onChange"
    onClickBottomSwiper="onClickBottomSwiper"
    onClickMore="onClickMore"
    moreText="更多内容"
    />

Badges

mini-ali-ui @mas.io/falcon-core

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

1.0.5

3 years ago