Notice

2025-09-01 06:41

Guide.

Property	Description	Type	Default
mode	Prompt option type: `link`, `closable`.	String	''
action	Prompt showing text.	String	''
actionCls	Prompt showing text custom class.	String	''
show	Show the notice bar or not.	Boolean	true
onClick	Click button callback.	() => void
enableMarquee	Enable animation or not.	Boolean	false
marqueeProps	Marquee parameter, `loop` for loop, `leading` for a pause before animation, `training` for pause between animations when the `loop` is true, `fps` for frame rate.	`Object<loop, leading, trailing, fps>`	{loop: false, leading: 500, trailing: 800, fps: 40 }

Example

copy

{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "notice": "mini-antui/es/notice/index"
  }
}

copy

<view class="demo-title">NoticeBar</view>
<view class="demo-item">
  <notice>Due to the upgrade of the national citizenship system, add bank card </notice>
</view>
<view class="demo-item">
  <notice mode="link" onClick="linkClick">Due to the upgrade of the national citizenship system, add bank card</notice>
</view>
<view class="demo-item">
  <notice mode="closable" onClick="closableClick" show="{{closeShow}}">Due to the upgrade of the national citizenship system, add bank card</notice>
</view>
<view class="demo-item">
  <notice mode="link" action="See details" onClick="linkActionClick">Due to the upgrade of the national citizenship system, add bank card</notice>
</view>
<view class="demo-item">
  <notice mode="closable" action="Do not remind again" onClick="closableActionClick" show="{{closeActionShow}}">Due to the upgrade of the national citizenship system, add bank card</notice>
</view>

copy

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