1.0.2 • Published 3 years ago
@mas.io/mas-notification-card v1.0.2
安装
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
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}}"
/>