NoticeBar 通告栏

在导航栏下方,一般用作系统提醒、活动提醒等通知。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "NoticeBar",
  3. "usingComponents": {
  4. "wux-notice-bar": "../../dist/notice-bar/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">NoticeBar</view>
  4. <view class="page__desc">通告栏</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Default</view>
  8. <wux-notice-bar content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  9. <view class="sub-title">Loop = true</view>
  10. <wux-notice-bar loop>
  11. 微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp
  12. </wux-notice-bar>
  13. <view class="sub-title">Speed = 100</view>
  14. <wux-notice-bar loop speed="100" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  15. <view class="sub-title">Leading = 3000</view>
  16. <wux-notice-bar loop leading="3000" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  17. <view class="sub-title">Trailing = 1500</view>
  18. <wux-notice-bar loop trailing="1500" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  19. <view class="sub-title">No Icon</view>
  20. <wux-notice-bar icon="" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  21. <view class="sub-title">Mode = closable</view>
  22. <wux-notice-bar mode="closable" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  23. <view class="sub-title">Mode = link</view>
  24. <wux-notice-bar mode="link" action="" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" bind:click="onClick">
  25. <text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>
  26. </wux-notice-bar>
  27. <view class="sub-title">Custom Style</view>
  28. <wux-notice-bar wux-class="notice-bar" icon="https://wux.cdn.cloverstd.com/logo.png" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
  29. </view>
  30. </view>
  1. Page({
  2. onClick() {
  3. wx.showModal({
  4. title: 'Thank you for your support!',
  5. showCancel: !1,
  6. })
  7. },
  8. })

视频演示

NoticeBar

API

NoticeBar props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-notice-bar
mode string 提示类型,可选值为 closable、link -
content string 滚动的文字 -
icon string 左侧提示图标 -
action string 右侧关闭图标,当 modeclosable、link 时才生效 -
loop boolean 文字是否滚动显示 false
leading number 进入第一次滚动所需等待的时间 500
trailing number 进入下一次滚动所需等待的时间 800
speed number 滚动显示的速度 25
bind:click function 点击关闭或者操作区域的回调函数 -

NoticeBar slot

名称 描述
- 自定义内容
header 自定义左侧内容
footer 自定义右侧内容

NoticeBar externalClasses

名称 描述
wux-class 根节点样式类