主题
LimeNoticeBar 通知栏组件
一个功能丰富的通知栏组件，用于循环播放展示一组消息通知。支持水平滚动、垂直滚动、多行展示、自定义图标、多种主题等多种配置，可用于公告、通知、消息提醒等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的通知展示需求。
插件依赖：
lime-shared、lime-style、lime-icon
文档链接
📚 组件详细文档请访问以下站点：
安装方法
- 在uni-app
中搜索并导入
lime-notice-bar - 导入后可能需要重新编译项目
- 在页面中使用
l-notice-bar组件
代码演示
基础用法
最简单的通知栏组件用法，只需要设置通知文本即可。
html
<l-notice-bar text="这是一条普通的通知信息"></l-notice-bar>纯文字通知
不显示左侧图标，只展示文本内容。
html
<l-notice-bar text="这是一条普通的通知信息" left-icon=""></l-notice-bar>带右侧图标
设置右侧图标，点击时会触发click事件。
html
<l-notice-bar
text="这是一条普通的通知信息"
right-icon="close"
@click="handleClick"
></l-notice-bar>多行展示
字较长时，可以通过设置 wrapable 属性来开启多行展示
html
<l-notice-bar
:wrapable="true"
text="这是一条较长的通知信息，需要多行展示才能完整显示所有内容"
></l-notice-bar>水平滚动播放
通过 marquee 属性设置为true自动开启滚动播放。
html
<l-notice-bar
:marquee="true"
text="这是一条较长的通知信息，将会水平滚动播放"
></l-notice-bar>垂直滚动播放
通过 marquee 属性设置为true，通过vertical属性设置为true可开启垂直播放，此时文本最好是数组。
html
<l-notice-bar
:marquee="true"
:vertical="true"
:text="[
'这是第一条通知信息',
'这是第二条通知信息',
'这是第三条通知信息'
]"
></l-notice-bar>不同主题类型
通知栏支持多种主题类型，包括普通、成功、警示和错误。
html
<l-notice-bar type="info" text="这是一条普通通知"></l-notice-bar>
<l-notice-bar type="success" text="这是一条成功通知"></l-notice-bar>
<l-notice-bar type="warning" text="这是一条警示通知"></l-notice-bar>
<l-notice-bar type="danger" text="这是一条错误通知"></l-notice-bar>自定义样式
可以自定义通知栏的背景色、文本颜色和图标颜色。
html
<l-notice-bar
bg-color="#3283ff"
color="white"
left-icon-color="white"
text="这是一条自定义样式的通知信息"
></l-notice-bar>自定义滚动速率和间隔
可以设置滚动速率和播放间隔时间。
html
<l-notice-bar
:marquee="true"
:speed="100"
:interval="3000"
text="这是一条自定义滚动速率和间隔的通知信息"
></l-notice-bar>快速预览
导入插件后，可以直接使用以下标签查看演示效果：
html
<!-- 代码位于 uni_modules/lime-notice-bar/components/lime-notice-bar -->
<lime-notice-bar />插件标签说明
| 标签名 | 说明 |
|---|---|
l-notice-bar | 组件标签 |
lime-notice-bar | 演示标签 |
Vue2使用说明
main.js中添加以下代码：
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)详细配置请参考官方文档：Vue Composition API
API文档
Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 通知文本内容 | string | Array | - |
| leftIcon | 左侧图标名称 | string | - |
| rightIcon | 右侧图标名称 | string | - |
| type | 内置主题类型，可选值：info、success、warning、danger | string | 'info' |
| interval | 垂直滚动时播放间隔时间（毫秒） | number | 2000 |
| delay | 动画延迟时间（毫秒） | number | 0 |
| speed | 滚动速率（px/s） | number | 50 |
| loop | 循环播放次数，-1表示无限循环 | number | 2 |
| color | 通知文本颜色 | string | - |
| bgColor | 通知栏背景色 | string | - |
| marquee | 是否开启滚动播放 | boolean | false |
| vertical | 是否垂直滚动播放 | boolean | false |
| wrapable | 是否开启文本换行（仅在非滚动模式下生效） | boolean | false |
| leftIconColor | 左侧图标颜色 | string | - |
| leftIconSize | 左侧图标大小 | string | - |
| fontSize | 文本字体大小 | string | - |
| rightIconColor | 右侧图标颜色 | string | - |
| rightIconSize | 右侧图标大小 | string | - |
| lStyle | 自定义样式 | string | object | - |
Events 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击通知栏时触发 | event: Event |
Slots 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义通知栏内容 |
| left-icon | 自定义左侧图标 |
| right-icon | 自定义右侧图标 |
主题定制
组件提供了以下CSS变量，可用于自定义样式：
| 变量名称 | 默认值 | 描述 |
|---|---|---|
--l-notice-bar-font-size | $font-size | 通知栏文本字体大小 |
--l-notice-bar-padding-x | $spacer | 通知栏水平内边距 |
--l-notice-bar-padding-y | $spacer-sm | 通知栏垂直内边距 |
--l-notice-bar-line-height | 22px | 通知栏文本行高 |
--l-notice-bar-icon-font-size | 22px | 通知栏图标大小 |
--l-notice-bar-info-color | $info-color | 普通主题文本颜色 |
--l-notice-bar-info-bg-color | $info-color-1 | 普通主题背景色 |
--l-notice-bar-success-color | $success-color | 成功主题文本颜色 |
--l-notice-bar-success-bg-color | $success-color-1 | 成功主题背景色 |
--l-notice-bar-warning-color | $warning-color | 警示主题文本颜色 |
--l-notice-bar-warning-bg-color | $warning-color-1 | 警示主题背景色 |
--l-notice-bar-danger-color | $error-color-6 | 错误主题文本颜色 |
--l-notice-bar-danger-bg-color | $error-color-1 | 错误主题背景色 |
支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|---|---|
 |  |