更新记录

0.0.5（2025-11-26）

• fix: 修复uniapp vue2类型问题

0.0.3（2025-04-18）

• fix: 修复缺少依赖的问题

0.0.2（2025-04-18）

• fix: 修复缺少依赖的问题

平台兼容性

uni-app(4.76)

uni-app x(4.81)

lime-marquee 跑马灯组件

一个支持横向/纵向不间断滚动的跑马灯组件，用于展示循环滚动的内容。支持自定义滚动方向、速度和延迟时间等配置，可用于公告、消息轮播、中奖信息展示等多种场景。组件提供了简洁的接口，可以满足各种滚动展示需求。

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

文档链接

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

• 跑马灯组件文档 - 站点1
• 跑马灯组件文档 - 站点2
• 跑马灯组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-marquee
2. 导入后可能需要重新编译项目
3. 在页面中使用l-marquee组件
4. uniapp x app 需要hb4.53及以上版本

代码演示

基础用法

最简单的跑马灯组件用法，为了实现无缝滚动，数据必须是两份拼接。

<l-marquee style="height: 200rpx">
  <view
    v-for="(item, i) in data"
    :key="i"
    style="
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 16rpx;">
    <view>{{ item }}</view>
    <text style="color: #999;">02-15</text>
  </view>
</l-marquee>

const kungFuManuals = ['九阳真经', '九阴真经', '易筋经', '神照经', '北冥神功', '吸星大法', '独孤九剑', '降龙十八掌'];
const genDataWithRandomManual = () => {
  return '郭靖 黄蓉 杨过 小龙女 令狐冲 任盈盈 张无忌 赵敏'.split(' ').map(item => {
    const randomIndex = Math.floor(Math.random() * kungFuManuals.length);
    return `恭喜${item}获得《${kungFuManuals[randomIndex]}》`;
  });
}
const manual = genDataWithRandomManual()
const data = ref([...manual, ...manual])

水平方向滚动

通过设置direction为horizontal实现水平方向滚动。

<l-marquee direction="horizontal" :speed="520">
  <view
    v-for="(item, i) in data"
    :key="i"
    style="flex-direction: row; display: flex; margin-right: 60rpx">
    <view style="display: flex;">{{ item }}</view>
    <text style="color: #999;">02-15</text>
  </view>
</l-marquee>

自定义速度和延迟

可以通过speed和delay属性自定义滚动速度和延迟时间。

<l-marquee :speed="100" :delay="2000">
  <view
    v-for="(item, i) in data"
    :key="i"
    style="margin-bottom: 16rpx;">
    <view>{{ item }}</view>
  </view>
</l-marquee>

快速预览

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

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

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

direction 可选值

Slots 插槽

使用提示

1. 为了实现无缝滚动效果，传入的数据需要进行两份拼接，如示例中的[...manual, ...manual]
2. 垂直滚动时，需要为组件设置固定高度，如style="height: 200rpx"
3. 水平滚动时，子元素需要设置合适的间距，如margin-right: 60rpx
4. 组件内部会自动处理滚动逻辑，无需额外的滚动控制代码

支持与赞赏

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

支付宝赞助	微信赞助