All Products
Search
Document Center

Notice

Last Updated: Feb 04, 2021

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

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "notice": "mini-antui/es/notice/index"
  5. }
  6. }
 
  1. <view class="demo-title">Notice bar</view>
  2. <view class="demo-item">
  3. <notice>Due to the upgrade of the national citizenship system, please add a bank card.</notice>
  4. </view>
  5. <view class="demo-item">
  6. <notice mode="link" onClick="linkClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
  7. </view>
  8. <view class="demo-item">
  9. <notice mode="closable" onClick="closableClick" show="{{closeShow}}">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
  10. </view>
  11. <view class="demo-item">
  12. <notice mode="link" action="Check it out" onClick="linkActionClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
  13. </view>
  14. <view class="demo-item">
  15. <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>
  16. </view>
 
  1. Page({
  2. data:{
  3. closeShow:true,
  4. closeActionShow:true
  5. },
  6. linkClick() {
  7. my.showToast({
  8. content: 'You have tapped the icon Link NoticeBar',
  9. duration: 3000
  10. });
  11. },
  12. closableClick() {
  13. this.setData({
  14. closeShow:false
  15. })
  16. my.showToast({
  17. content: ''You have tapped the icon close NoticeBar',
  18. duration: 3000
  19. });
  20. },
  21. linkActionClick() {
  22. my.showToast({
  23. content: 'You have tapped the text Link NoticeBar',
  24. duration: 3000
  25. });
  26. },
  27. closableActionClick() {
  28. this.setData({
  29. closeActionShow:false
  30. })
  31. my.showToast({
  32. content: 'You have tapped the text close NoticeBar',
  33. duration: 3000
  34. });
  35. }
  36. })