uniapp 跑马灯如何实现

在uniapp中如何实现跑马灯效果？我在H5端需要使用横向滚动的文字公告效果，类似传统的marquee标签功能。尝试过使用CSS动画和swiper组件，但效果不太理想：CSS动画在部分安卓机上会出现卡顿，swiper又无法实现无缝循环滚动。请问有没有成熟的解决方案或者推荐组件？最好能兼顾性能和兼容性，支持动态更新滚动内容。

2 回复

在uniapp中，实现跑马灯效果可使用<marquee>标签或CSS动画。

方法1：使用marquee标签

<marquee behavior="scroll" direction="left">
  这里是跑马灯内容
</marquee>

方法2：CSS动画

<view class="marquee">
  <text class="content">{{text}}</text>
</view>

.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

推荐使用CSS动画，兼容性更好。


在 UniApp 中实现跑马灯效果，可以通过 CSS 动画或使用 <marquee> 标签（部分平台支持）实现。以下是两种常用方法：

1. 使用 CSS 动画实现（推荐，兼容性好）

通过 @keyframes 定义滚动动画，结合 overflow: hidden 和 white-space: nowrap 实现横向滚动。

示例代码：

<template>
  <view class="marquee-container">
    <view class="marquee-content">{{ text }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一条跑马灯内容，会持续滚动显示..."
    };
  }
};
</script>

<style>
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* 初始位置在右侧 */
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

2. 使用 <marquee> 标签（部分平台可能不支持）

HTML 原生标签，但 UniApp 中部分平台（如小程序）可能不兼容。

示例代码：

<template>
  <marquee behavior="scroll" direction="left">
    {{ text }}
  </marquee>
</template>

注意事项：

  • 性能优化：若内容较长，可考虑使用 requestAnimationFrame 实现 JavaScript 控制动画。
  • 动态内容：通过 setData 更新 text 可实现内容动态变化。
  • 滚动速度：调整 CSS 中 animation-duration（如 10s）控制滚动速度。

以上方法简单高效，适用于大部分 UniApp 项目场景。

回到顶部