记录（十八）vue3的滚动轮播公告

效果图，公告会上下滚动

代码

<template>
  <div class="col-xs-4">
    <div class="title">
      <i>
        <img src="../assets/img/icon-tt04.png" alt="">
      </i>
      "本周推荐"
      <a href="" class="tt-more">more+</a>
    </div>
    <div class="marquee-wrap">
      <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
        <li v-for="(item, index) in listData" :key="index">{{ truncateText(item, 18) }}</li>
      </ul>
    </div>
  </div>

</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const animateUp = ref(false);
const listData = ref([
  '[新闻周刊]本周特写 跨越城市的“背篓”',
  '[新闻周刊]本周人物 朱昌忠：老将 从“新”出发',
  '[新闻周刊]本周人物 巫婧：谈谈死亡',
  '[新闻周刊]本周视点 校园，拒绝欺凌',
  '点火成功！直击神舟十七号飞船发射升空瞬间',
  '[新闻周刊]本周人物 刘磊：山火扑救',
  '[新闻周刊]本周人物 陈晓光：蚊来了',
]);

let timer = null;
//设置滚动时间
const scrollAnimate = () => {
  animateUp.value = true;
  setTimeout(() => {
    listData.value.push(listData.value[0]);
    listData.value.shift();
    animateUp.value = false;
  }, 500);
};
//当字数超过多少时，变成省略号...
const truncateText = (text, length) => {
  if (text && text.length > length) {
    return text.slice(0, length) + '...';
  }
  return text;
}

onMounted(() => {
  timer = setInterval(scrollAnimate, 2000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style scoped lang="scss">
.col-xs-4 {
  width: 400px;
  padding: 1px 10px;

}

.title {
  position: relative;
  padding-left: 45px;
  font-size: 26px;
  font-weight: 700;
  color: #31499a;
  margin-top: 20px;
  margin-bottom: 30px;
  width: 300px;
  //border: 1px red solid;
}

.title i {
  position: absolute;
  left: 0;
  top: 50%;
  height: 40px;
  margin-top: -20px;
  display: block;
}

.tt-more {
  float: right;
  font-size: 12px;
  color: #999;
  font-weight: normal;
  height: 37px;
  line-height: 37px;
  text-decoration: none;
  background-color: transparent;
}

.marquee-wrap {
  width: 360px;
  height: 300px;
  border-radius: 20px;
  background: rgba($color: #000000, $alpha: 0.6);

  .marquee-list {
    li {
      width: 340px;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 10px;
      list-style: none;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
      display: flex;
      display: inline-block;
      cursor: pointer;
    }

    li:hover {
      background-color: rgb(193, 193, 146);
      /* 设置鼠标移动到字体上面时的高亮背景颜色 */
    }
  }

  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
}
</style>

希望能帮助到大家，谢谢！