Skip to content

LimeMarquee 跑马灯组件

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

插件依赖:lime-sharedlime-style

文档链接

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

安装方法

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

代码演示

基础用法

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

html
<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>
js
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])

水平方向滚动

通过设置directionhorizontal实现水平方向滚动。

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

自定义速度和延迟

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

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

快速预览

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

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

插件标签说明

标签名说明
l-marquee组件标签
lime-marquee演示标签

Vue2使用说明

main.js中添加以下代码:

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

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

API文档

Props 属性说明

属性名说明类型默认值
direction滚动方向stringvertical
speed滚动速率number50
delay延迟滚动时间(毫秒)number1000

direction 可选值

说明
vertical垂直方向滚动
horizontal水平方向滚动

Slots 插槽

名称说明
default跑马灯内容,为了实现无缝滚动,数据必须是两份拼接

使用提示

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

支持与赞赏

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

支付宝赞助微信赞助

源代码

组件源码