uniapp 如何实现列表垂直自动滚动

在uniapp中如何实现列表的垂直自动滚动效果？我尝试了使用scroll-view组件，但无法实现自动滚动功能。请问有没有什么方法可以让列表内容自动向上循环滚动？最好能控制滚动速度和停顿时间，类似公告栏的效果。如果能提供代码示例就更好了，谢谢！

2 回复

使用 scroll-view 组件，设置 scroll-y 为 true，结合定时器动态修改 scroll-top 值即可实现垂直自动滚动。


在 UniApp 中，可以通过 CSS 动画或 JavaScript 定时器实现列表垂直自动滚动。以下是两种常用方法：

方法一：使用 CSS animation（推荐）

通过 CSS 定义滚动动画，性能较好。

代码示例：

<template>
  <view class="scroll-container">
    <view class="scroll-content">
      <view v-for="item in list" :key="item.id" class="item">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: '列表项1' },
        { id: 2, text: '列表项2' },
        // ... 更多数据
      ]
    }
  }
}
</script>

<style>
.scroll-container {
  height: 300rpx; /* 容器高度 */
  overflow: hidden;
  position: relative;
}

.scroll-content {
  animation: scroll 10s linear infinite; /* 动画设置 */
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 滚动距离 */
  }
}

.item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
</style>

方法二：使用 JavaScript 定时器

通过 setInterval 动态修改滚动位置，更灵活但性能稍差。

代码示例：

<template>
  <view class="scroll-container" @touchstart="stopScroll" @touchend="startScroll">
    <view class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <view v-for="item in list" :key="item.id" class="item">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [...], // 列表数据
      offset: 0,
      timer: null,
      speed: 1 // 滚动速度
    }
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.offset -= this.speed;
        // 滚动到末尾时重置
        if (Math.abs(this.offset) >= this.list.length * 100) {
          this.offset = 0;
        }
      }, 30);
    },
    stopScroll() {
      clearInterval(this.timer);
    }
  }
}
</script>

<style>
.scroll-container {
  height: 300rpx;
  overflow: hidden;
}
.scroll-content {
  transition: transform 0.3s;
}
.item {
  height: 100rpx;
  line-height: 100rpx;
}
</style>

注意事项：

  1. 容器高度：需固定高度并设置 overflow: hidden
  2. 循环滚动：通过重置位置或复制列表数据实现无缝滚动
  3. 触摸控制：添加 touchstart/touchend 事件可暂停/继续滚动
  4. 性能优化：数据量较大时建议使用虚拟滚动

根据需求选择合适方案，CSS 方案适用于简单滚动，JS 方案适用于需要动态控制的场景。

回到顶部