如何使用通告栏NoticeBar_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

展示一组消息通知，用于当前页面内信息的通知，是一种较醒目的页面内通知方式。

属性

属性	类型	必填	默认值	说明
mode	'link' \| 'closeable'	否	-	通告类型，'link' 表示连接，整行可点；'closeable' 表示点击 x 可以关闭；不填时表示右侧没有图标。
actions	string[]	否	-	行动点，最多两个行动点，当有 action 时，mode 失效。
showIcon	boolean	否	false	是否显示左侧的图标
enableMarquee	boolean	否	false	是否开启滚动动画
loop	boolean	否	false	是否循环滚动，enableMarquee 为 true 时有效。
type	'default' \| 'info' \| 'error' \| 'primary'	否	'default'	提示类型，'default' 橙色，'info' 灰色，'error' 红色，'primary' 蓝色
className	string	否	-	类名

事件

事件名	说明	类型
onTap	点击通知栏右侧的图标（箭头或者叉），触发回调	`() => void`
onActionTap	点击右侧操作区域文本，触发回调	`(index: number) => void`

样式类

类名	说明
amd-notice-bar	整体样式
amd-notice-bar-default	整体样式
amd-notice-bar-danger	整体样式
amd-notice-bar-primary	整体样式
amd-notice-bar-transparent	整体样式
amd-notice-bar-content	内部区域样式
amd-notice-bar-scroll-left	左侧阴影渐变区域样式
amd-notice-bar-scroll-right	右侧阴影渐变区域样式
amd-notice-bar-marquee	文本展示区域样式
amd-notice-bar-operation	右侧操作区域样式
amd-notice-bar-operation-icon	右侧操作区域内图标样式
amd-notice-bar-operation-text	右侧操作区域文字样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="通告栏语义" padding="0">
    <notice 
      type="default"
      showIcon>
      default
    </notice>
    <white-space/>
    <notice 
      type="error"
      showIcon>
      error
    </notice>
    <white-space/>
    <notice 
      type="info"
      showIcon>
      info
    </notice>
    <white-space/>
    <notice 
      type="primary"
      showIcon>
      primary
    </notice>
  </demo-block>
  <demo-block title="可关闭" padding="0">
    <notice 
      showIcon
      onTap="handleClose"
      mode="closeable">
      这条通知可以关闭
    </notice>
  </demo-block>
  <demo-block title="超长滚动" padding="0">
    <block a:for="{{typeList}}">
      <notice 
        type="{{item}}"
        showIcon="{{true}}" 
        enableMarquee="{{true}}"
        loop="{{true}}"
        onTap="handleTapLink"
        mode="link">
        文本溢出时，开启循环滚动。文字不够继续添加文字凑数。
      </notice>
      <white-space/>
    </block>
  </demo-block>
  <demo-block title="自定义" padding="0">
    <notice 
      showIcon
      actions="{{actionsText2}}"
      mode="link"
      onTap="handleTapLink"
      onActionTap="handleTapAction">
      自定义右侧按钮
    </notice>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    actionsText2: ['不再提示', '查看详情'],
    typeList: ['default', 'error', 'info', 'primary'],
  },
  handleTapAction(e) {
    my.alert({
      title: `当前点击的是 actions 中的第 ${e} 个元素。`,
    });
  },
  handleTapLink() {
    my.alert({
      title: 'link 类型被点击了。',
    });
  },
  handleClose() {
    my.alert({
      title: '点击关闭',
    });
  },
});

index.json 的代码示例如下：

{
  "defaultTitle": "Notice",
  "usingComponents": {
    "notice": "antd-mini/es/NoticeBar/index",
    "white-space": "../../components/WhiteSpace/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}