公告滚动效果

效果展示

代码展示vue3.2 框架

1. template

 <!-- 父盒子设置高度宽度限定范围，内容超过部分隐藏，用绝对定位做滚动子绝父相-->
 <div class="content-box" style="height: 100%; overflow: hidden; position: relative">
  <!-- 子盒子子绝父相，且设定距离顶部top动态值-->
      <div
        class="content"
        style="position: absolute; width: 100%"
        :style="{ top: listTop + 'px' }"
      >
          <div
            v-for="(item, index) of messageList"
            :key="index"
            class="list"
          >
            <div class="message-info">{{ item.nr || '' }}</div>
          </div>
       </div>
   </div>

2.script

<script lang="ts" setup>
 // 轮播，滚动公告，衔接滚动
 const listTop = ref(0); // top值初始化
 const setScroll = () => {
   var t = setInterval(() => { // 每隔20执行
     listTop.value -= 1;    // -1
     if (listTop.value === -40) {   // 每个item高度为40，当第一个item上去后执行
       messageList.value.push(messageList.value.splice(0, 1)[0]); // 删除数组第一个元素，插入到数组后面
       // 注意splice改变原数组，返回删除项
       listTop.value = 0; //重置top
       clearInterval(t); //取消定时器
       //设置一个2秒后执行的定时器,重新开启滚动
       setTimeout(() => {
         setScroll();
       }, 2000);
     }
   }, 20);
 };
 setScroll(); // 渲染即执行
</script>