前言

前段时间看到同事做的大屏项目有一个滚动列表，就像信息滚动屏，感觉还挺有意思的，本节就来试着简单实现一下。

实现

该需求我就用vue3来实现，大家用自己喜欢的技术栈就行，思路是一致的。大屏项目一般会有专门的UI设计，加上各种背景图与样式会显得非常的高大上，这里就简单实现，不搞那么多花里胡哨。
滚动列表是自动从上到下滚动，要想实现该效果首先列表包裹着一个div中，然后让整个列表沿着y轴进行位移，就能做出滚动效果，因为是自动的，我们就用setInterval写一个定时任务去位移。 根据以上分析我们先简单把页面写一下，定义一个数据列表，用v-for去循环出来：

   <div class="wrapper">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item.id + index"
          class="list-item"
        >
          {{ item.content }}{{ index + 1 }}
        </li>
      </ul>
    </div>
    <script setup>
    const list = new Array(10).fill({ id: Math.random(), content: '列表' });
    </script>

注意这里我们要把包裹的div设置为overflow:hidden。 接下来我们利用css中的transform去平移列表，每次平移的距离我们可以用一个变量去表示，用定时器不断修改变量的值达到自动的效果。

 let distance = ref(0);
onMounted(() => {
  setInterval(() => {
    distance.value -= 10;
    if (-distance.value > 10 * list.length) {
      distance.value = 0;
    }
  }, 1000);
});

这样我们就得到了自动滚动的列表，但是这个滚动一卡一卡的，这是因为我们是分段去位移的，那么我们简单优化下，将位置一步位移到位，也就是让distance的值是每次位移距离乘以列表数，并且设置transition过渡属性，让位移显得更加顺畅。

<ul
        :style="{
          transform: 'translateY(' + distance + 'px)',
          transition: 'all 3s'
        }"
      >
 </ul>

到此我们就实现了一个简单的demo，除了样式还有很多待优化的点，比如让列表进行重复循环，将可视区域变成虚拟列表提升性能。

总结

以上就是滚动列表的实现，就是css加上定时器实现的，感兴趣的可以丰富其功能。