Notice - Mini Program| Alibaba Cloud Documentation Center

This topic describes the notice bar.

Property	Description	Type	Default value
Mode	Type of the notice, which can be: `link` or `closable`.	String	‘’
action	The notice shows text.	String	‘’
actionCls	The notice shows the custom class of text.	String	‘’
show	Whether to display the notice bar.	Boolean	true
onClick	Callback when you tap the button.	() => void	-
enableMarquee	Whether to enable the animation.	Boolean	false
marqueeProps	marquee parameters, where `loop` indicates whether to loop, `leading` indicates a pause before the animation starts, `trailing` indicates an interval at animations when `loop` is true, and `fps` indicates the animation frame rate.	Object<loop, leading, trailing, fps>	{loop: false, leading: 500, trailing: 800, fps: 40 }

Sample code

{
  "defaultTitle": "AntUI component library of the Mini Program",
  "usingComponents": {
    "notice": "mini-antui/es/notice/index"
  }
}

<view class="demo-title">Notice bar</view>
<view class="demo-item">
  <notice>Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
  <notice mode="link" onClick="linkClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
  <notice mode="closable" onClick="closableClick" show="{{closeShow}}">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
  <notice mode="link" action="Check it out" onClick="linkActionClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
  <notice mode="closable" action="Don't remind again" onClick="closableActionClick" show="{{closeActionShow}}">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>

Page({
  data:{
    closeShow:true,
    closeActionShow:true
  },
  linkClick() {
    my.showToast({
      content: 'You have tapped the icon Link NoticeBar',
      duration: 3000
    });
  },
  closableClick() {
    this.setData({
      closeShow:false
    })
    my.showToast({
      content: ''You have tapped the icon close NoticeBar',
      duration: 3000
    });
  },
  linkActionClick() {
    my.showToast({
      content: 'You have tapped the text Link NoticeBar',
      duration: 3000
    });
  },
  closableActionClick() {
    this.setData({
      closeActionShow:false
    })
    my.showToast({
      content: 'You have tapped the text close NoticeBar',
      duration: 3000
    });
  }
})