Notice 通告栏

引导。

扫码体验：
Notice 通告栏 - 图1

属性名描述类型默认值
mode提示可选类型：link、closableString''
action提示显示文本String''
actionCls提示显示文本自定义classString''
show是否显示通告栏Booleantrue
onClick点击按钮回调() => void
enableMarquee是否开启动画Booleanfalse
marqueePropsmarquee 参数，其中loop表示是否循环，leading表示动画开启前停顿，training表示loop为true时时，动画间停顿，fps表示动画帧率Object<loop, leading, trailing, fps>{loop: false, leading: 500, trailing: 800, fps: 40 }

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "notice": "mini-antui/es/notice/index"
  5.   }
  6. }
  1. <view class="demo-title">NoticeBar 通告栏</view>
  2. <view class="demo-item">
  3.   <notice>因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
  4. </view>
  5. <view class="demo-item">
  6.   <notice mode="link" onClick="linkClick">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
  7. </view>
  8. <view class="demo-item">
  9.   <notice mode="closable" onClick="closableClick" show="{{closeShow}}">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
  10. </view>
  11. <view class="demo-item">
  12.   <notice mode="link" action="去看看" onClick="linkActionClick">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
  13. </view>
  14. <view class="demo-item">
  15.   <notice mode="closable" action="不再提示" onClick="closableActionClick" show="{{closeActionShow}}">因全国公民身份系统升级，添加银行卡银行卡银行卡银行卡</notice>
  16. </view>
  1. Page({
  2.   data:{
  3.     closeShow:true,
  4.     closeActionShow:true
  5.   },
  6.   linkClick() {
  7.     my.showToast({
  8.       content: '你点击了图标Link NoticeBar',
  9.       duration: 3000
  10.     });
  11.   },
  12.   closableClick() {
  13.     this.setData({
  14.       closeShow:false
  15.     })
  16.     my.showToast({
  17.       content: '你点击了图标close NoticeBar',
  18.       duration: 3000
  19.     });
  20.   },
  21.   linkActionClick() {
  22.     my.showToast({
  23.       content: '你点击了文本Link NoticeBar',
  24.       duration: 3000
  25.     });
  26.   },
  27.   closableActionClick() {
  28.     this.setData({
  29.       closeActionShow:false
  30.     })
  31.     my.showToast({
  32.       content: '你点击了文本close NoticeBar',
  33.       duration: 3000
  34.     });
  35.   }
  36. })

原文: https://docs.alipay.com/mini/component-ext/notice