更新记录

0.0.7（2025-12-01） 下载此版本

• feat: 支持css var

0.0.6（2025-06-09） 下载此版本

• feat: 增加l-style自定义样式属性

0.0.5（2025-04-22） 下载此版本

• feat: 兼容uniappx 鸿蒙next

平台兼容性

uni-app(4.61)

uni-app x(4.61)

lime-notice-bar 通知栏组件

一个功能丰富的通知栏组件，用于循环播放展示一组消息通知。支持水平滚动、垂直滚动、多行展示、自定义图标、多种主题等多种配置，可用于公告、通知、消息提醒等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的通知展示需求。

插件依赖：lime-shared、lime-style、lime-icon

文档链接

📚 组件详细文档请访问以下站点：

• 通知栏组件文档 - 站点1
• 通知栏组件文档 - 站点2
• 通知栏组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-notice-bar
2. 导入后可能需要重新编译项目
3. 在页面中使用l-notice-bar组件

::: tip 注意🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。

如果不需要lime-svg在项目里删除即可

:::

代码演示

基础用法

最简单的通知栏组件用法，只需要设置通知文本即可。

<l-notice-bar text="这是一条普通的通知信息"></l-notice-bar>

纯文字通知

不显示左侧图标，只展示文本内容。

<l-notice-bar text="这是一条普通的通知信息" left-icon=""></l-notice-bar>

带右侧图标

设置右侧图标，点击时会触发click事件。

<l-notice-bar 
  text="这是一条普通的通知信息" 
  right-icon="close" 
  @click="handleClick"
></l-notice-bar>

多行展示

字较长时，可以通过设置 wrapable 属性来开启多行展示

<l-notice-bar 
  :wrapable="true" 
  text="这是一条较长的通知信息，需要多行展示才能完整显示所有内容"
></l-notice-bar>

水平滚动播放

通过 marquee 属性设置为true自动开启滚动播放。

<l-notice-bar 
  :marquee="true" 
  text="这是一条较长的通知信息，将会水平滚动播放"
></l-notice-bar>

垂直滚动播放

通过 marquee 属性设置为true，通过vertical属性设置为true可开启垂直播放，此时文本最好是数组。

<l-notice-bar 
  :marquee="true" 
  :vertical="true" 
  :text="[
    '这是第一条通知信息', 
    '这是第二条通知信息', 
    '这是第三条通知信息'
  ]"
></l-notice-bar>

不同主题类型

通知栏支持多种主题类型，包括普通、成功、警示和错误。

<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>

自定义样式

可以自定义通知栏的背景色、文本颜色和图标颜色。

<l-notice-bar 
  bg-color="#3283ff" 
  color="white" 
  left-icon-color="white" 
  text="这是一条自定义样式的通知信息"
></l-notice-bar>

自定义滚动速率和间隔

可以设置滚动速率和播放间隔时间。

<l-notice-bar 
  :marquee="true" 
  :speed="100" 
  :interval="3000" 
  text="这是一条自定义滚动速率和间隔的通知信息"
></l-notice-bar>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-notice-bar/components/lime-notice-bar -->
<lime-notice-bar />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助