全部产品
云市场
云游戏

通告栏(Notice)

更新时间:2020-04-28 16:55:23

本文介绍通告栏(Notice)。

属性名 描述 类型 默认值
mode 提示可选类型:linkclosable String ‘’
action 提示显示文本 String ‘’
actionCls 提示显示文本自定义class String ‘’
show 是否显示通告栏 Boolean true
onClick 点击按钮回调 () => void -
enableMarquee 是否开启动画 Boolean false
marqueeProps marquee 参数,其中 loop 表示是否循环,leading 表示动画开启前停顿,trailing 表示 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. })