支付宝小程序引导组件通告栏·Notice

当应用有重要公告或者由于用户的刷新操作产生提示反馈时可以使用通告栏系统。通告栏不会对用户浏览当前页面内容产生影响，但又能明显的引起用户的注意。公告内容不超过一行。

说明：

仅用于 UI 展示没有对应的业务逻辑功能；
notice 为瀑布流布局不会定位到页面头部，用户可以根据需求将它放在相应位置。

扫码体验

示例代码

{
  "defaultTitle": "Notice",
  "usingComponents": {
    "notice": "mini-ali-ui/es/notice/index"
  }
}

<notice
  marqueeProps="{{marqueeProps}}"
  enableMarquee="{{true}}"
  show="{{true}}"
  type="error"
  mode="link"
  onClick="actionClick"
  actionLeft="文字按钮"
  onClickLeft="linkActionClick">
  无限循环滚动的通告栏展示情况。文字不够继续添加文字凑数。
</notice>
<notice
  show="{{true}}"
  type="active"
  onClick="actionClick"
  capsule="{{true}}"
  capsuleItem="{{['https://img.alicdn.com/tfs/TB1yTvnfQY2gK0jSZFgXXc5OFXa-145-145.png','https://img.alicdn.com/tfs/TB1egTmfNz1gK0jSZSgXXavwpXa-145-145.png','https://img.alicdn.com/tfs/TB1l36mfQP2gK0jSZPxXXacQpXa-145-145.png','https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png']}}">4 个优惠信息推荐
</notice>

Page({
  data:{
    marqueeProps: {
      loop: true,
      leading: 1000,
      trailing: 800,
      fps: 40,
    },
  },
  linkActionClick() {
    my.showToast({
      content: '左侧操作区被点击了',
      duration: 1000,
    });
  },
  actionClick() {
    my.showToast({
      content: '你点击了右侧操作区',
      duration: 1000,
    });
  },
})

属性

属性	类型	默认值	描述
className	String	-	自定义 class。
mode	String	-	右侧 icon 类型。可选类型：link（以链接形式展示通告，默认以 > 表示）、closable（告知该通告可关闭，默认以 X 表示）。
action	String	-	右侧文本按钮文案
actionLeft	String	-	右侧第二个按钮文案。
onClick	EventHandle	() => {}	点击右侧按钮回调。
onClickLeft	EventHandle	() => {}	点击右侧第二个按钮回调。
show	Boolean	true	是否显示 notice。
enableMarquee	Boolean	false	是否开启动画。
marqueeProps	Object	{loop: false, leading: 500, trailing: 800, fps: 40 }	marquee 参数，其中 loop 表示是否循环，leading 表示动画开启前停顿，trailing 表示 loop 为 true 时，动画间停顿，fps 表示动画帧率。
showIcon	Boolean	true	是否显示 icon。
capsuleItem	Array	-	胶囊通告栏的业务 logo url。
capsule	Boolean	false	是否为胶囊通告栏。
type	String	normal	通告栏类型。可选值：normal、error、active、transparent。

Bug & Tip

如果 action 没有任何值，那么 actionLeft 将不会显示；
onClick、onClickLeft 相对应于 action 和 actionLeft；
当 mode 的值为 link，显示为一个箭头 icon 时，整条通告栏是可点击的；
当 action 有值时，将会代替 mode 中的 closable 和 link，只会显示文字；
capsuleItem 在胶囊通告栏中只会显示 3 个，超过部分仅统计个数，但不会显示 logo；
当 type 的值为 transparent 时，展示的是带有透明度，内容色为白色的通告栏。

支付宝小程序引导组件 通告栏·Notice

扫码体验

示例代码

属性

Bug & Tip

推荐文章

推荐教程

最新教程

支付宝小程序引导组件通告栏·Notice