NoticeBar 通告栏

通告栏组件，组件名：uni-notice-bar，代码块： uNoticeBar。

使用方式：

在 script 中引用组件 

  1. import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
  2. export default {
  3.     components: {uniNoticeBar}
  4. }

基本用法

  1. <uni-notice-bar 
  2.     single="true" 
  3.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  4. </uni-notice-bar>
  5. <uni-notice-bar 
  6.     text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  7. </uni-notice-bar>

文字滚动

  1. <uni-notice-bar 
  2.     show-icon="true" 
  3.     scrollable="true" single="true" 
  4.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  5. </uni-notice-bar>

显示图标

  1. <uni-notice-bar 
  2.     show-icon="true" 
  3.     text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  4. </uni-notice-bar>

显示关闭按钮

  1. <uni-notice-bar 
  2.     show-close="true" 
  3.     show-icon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  4. </uni-notice-bar>

查看更多

  1.  <uni-notice-bar 
  2.     @getmore="getMore" 
  3.     more-text="查看更多" 
  4.     single="true" 
  5.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
  6. </uni-notice-bar>

属性说明：

属性名类型默认值说明
textString-显示文字
more-textString-“查看更多”的文本，如果设置文字，NoticeBar为单行
speedNumber100文字滚动的速度，默认100px/秒
background-colorString#fffbe8背景颜色
colorString#de8c17文字颜色
singleBooleanfalse是否单行
scrollableBooleanfalse是否滚动，为true时，NoticeBar为单行
show-iconBooleanfalse是否显示左侧喇叭图标
show-closeBooleanfalse是否显示左侧关闭按钮

事件说明：

事件名称说明
click点击 NoticeBar 触发事件
close关闭 NoticeBar 触发事件
getmore点击”查看更多“时触发事件

Tips