LimeUI+1.2.0

主题

LimeMarquee 跑马灯组件 ​

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

插件依赖：lime-shared、lime-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])

水平方向滚动 ​

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

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>

自定义速度和延迟 ​

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

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. 组件内部会自动处理滚动逻辑，无需额外的滚动控制代码

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码