安装

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

组件介绍

行业小程序消息通知类型卡片组件，主要用于透出相关通知消息、新闻等展示，内容支持插槽自定义

参数说明

|属性 | 必填 | 参数类型 | 参数说明 | 默认值 | ---- | ---- | ---- | ------ | ------ |dataList | true | Array | 数据列表，若为多条则自动轮播，详见下方dataList 字段说明 | [] |logo | false | String | 左侧logo，如果传该值，则轮播区域为中间文字区域，如果在dataList中传入 logo，则轮播区域为整体 | - | |arrow | true | Boolean | 是否展示右侧箭头 | true | |onItemClick | false | (event, index, item) => void | 消息条目的点击回调 | - | |onItemShow | false | (event, index, item) => void | 消息条目轮播可见时的回调 | - | |onCardShow | false | (event: any) => void | 组件首次出现的回调 | - | |interval | false | Number | 自动切换时间间隔(ms) | 5000 | |circular | false | Bool | 轮播效果，设置为true时轮播滚动结束循环向上滚动，为false轮播结束从头开始 | true |

Badges

[![install size][install-size-image]][install-size-url]

dataList 字段说明

|属性 | 必填 | 参数类型 | 参数说明 | 默认值 | ---- | ---- | ---- | ------ | ------ |logo | true | String | 左侧 logo 图片链接 | - |text | true | String | 通知文案 | - |

插槽

|名称 | 说明 | 默认值 | ---- | ---- | ---- |default | 自定义渲染内容，作用域插槽，传出item和index参数，不传默认为示例参数样式 | -

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <mas-notification-card
    dataList="{{dataList}}"
    logo="{{logo}}"
    arrow="{{arrow}}"
    onItemClick="{{onItemClick}}"
    onItemShow="{{onItemShow}}"
    onCardShow="{{onCardShow}}"
  />