uniapp跑马灯循环滚动模式如何实现

在uniapp中如何实现跑马灯的循环滚动效果？我在开发时需要让一段文字或图片无限循环滚动展示，类似公告栏的效果。尝试过使用swiper组件但无法实现无缝循环，请问有没有更好的解决方案？需要支持横向和纵向滚动，最好能控制滚动速度和方向。另外，如果内容长度超过容器宽度该如何处理？求具体的代码示例或推荐可用的插件。

2 回复

在uniapp中，实现跑马灯循环滚动可以使用<marquee>标签或CSS动画。推荐使用CSS：

.marquee {
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

HTML部分：

<view class="marquee">需要滚动的内容</view>

简单高效，自动循环滚动。


在 UniApp 中实现跑马灯循环滚动效果，可以通过以下两种方法实现：

方法一：使用 CSS3 动画（推荐）

通过 CSS3 的 animation 和 @keyframes 实现无缝滚动。

<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;
  position: relative;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

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

方法二：使用 JavaScript 控制（动态内容）

适用于需要动态更新内容的情况。

<template>
  <view class="marquee-wrapper">
    <view class="marquee-text" :style="{ transform: `translateX(${translateX}%)` }">
      {{ text }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '滚动文本内容',
      translateX: 100,
      timer: null
    }
  },
  mounted() {
    this.startMarquee()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    startMarquee() {
      this.timer = setInterval(() => {
        this.translateX -= 0.5
        if (this.translateX <= -100) {
          this.translateX = 100
        }
      }, 50)
    }
  }
}
</script>

<style>
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.05s linear;
}
</style>

参数说明：

  • 动画时长：调整 animation-duration（CSS）或 setInterval 间隔（JS）控制速度
  • 滚动方向：修改 translateX 的正负值可改变方向
  • 文本内容：直接修改 text 数据

注意事项：

  1. 确保容器宽度足够显示滚动效果
  2. 长文本可能需要调整动画时长
  3. 在组件销毁时记得清除定时器（方法二）

CSS3 方法性能更好，推荐使用；如需动态控制滚动行为，可选择 JavaScript 方法。

回到顶部