Notice 通告栏 - 管理控制台

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

说明：

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

扫码体验

示例代码

// API-DEMO page/component/notice/notice.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "notice": "mini-antui/es/notice/index"
  }
}

<!-- API-DEMO page/component/notice/notice.axml -->
<view class="demo-title">NoticeBar 通告栏</view>
<view class="demo-item">
  <notice>因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>
<view class="demo-item">
  <notice enableMarquee="{{true}}" marqueeProps="{{loop: true, leading: 500, trailing: 800, fps: 40 }}">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>
<view class="demo-item">
  <notice mode="link" onClick="linkClick">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>
<view class="demo-item">
  <notice mode="closable" onClick="closableClick" show="{{closeShow}}">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>
<view class="demo-item">
  <notice mode="link" action="去看看" onClick="linkActionClick">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>
<view class="demo-item">
  <notice mode="closable" action="不再提示" onClick="closableActionClick" show="{{closeActionShow}}">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
</view>

// API-DEMO page/component/notice/notice.js
Page({
  data:{
    closeShow:true,
    closeActionShow:true
  },
  linkClick() {
    my.showToast({
      content: '你点击了图标Link NoticeBar',
      duration: 3000
    });
  },
  closableClick() {
    this.setData({
      closeShow:false
    })
    my.showToast({
      content: '你点击了图标close NoticeBar',
      duration: 3000
    });
  },
  linkActionClick() {
    my.showToast({
      content: '你点击了文本Link NoticeBar',
      duration: 3000
    });
  },
  closableActionClick() {
    this.setData({
      closeActionShow:false
    })
    my.showToast({
      content: '你点击了文本close NoticeBar',
      duration: 3000
    });
  }
})

/* API-DEMO page/component/notice/notice.acss */
.demo-title{
  font-size: 15px;
  font-weight: 500;
  padding: 10px 5px;
  border-bottom: 1px solid #ccc;
}

.demo-item{
  margin-bottom: 10px;
}

属性

属性名	描述	类型	默认值
mode	提示可选类型：link（以链接形式展示通告，默认以 > 表示）、closable（告知该通告可关闭，默认以 X 表示）。	String	''
action	提示显示文本。	String	''
actionCls	提示显示文本自定义 class。	String	''
show	是否显示通告栏。	Boolean	true
onClick	点击按钮回调。	() => void	-
enableMarquee	是否开启动画。	Boolean	false
marqueeProps	marquee 参数，其中 loop 表示是否循环，leading 表示动画开启前停顿，trailing 表示 loop 为 true 时，动画间停顿，fps 表示动画帧率。	Object<loop, leading, trailing, fps>	{loop: false, leading: 500, trailing: 800, fps: 40 }