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

2020-09-18 11:21 更新

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

说明:

  • 仅用于 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 时,展示的是带有透明度,内容色为白色的通告栏。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号