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;
}

属性