交替滚动，衔接自然

前端

2023-10-16 10:48:14

滚动的实现

滚动公告实现起来相对简单，只需使用CSS动画就能完成。但衔接滚动却需要一些技巧，否则滚动时会出现断层，破坏整体效果。

衔接滚动的实现要点如下：

创建两个相同的滚动公告组件，并将其分别放在两个容器中。
滚动公告组件的实现，保证前后有重复的数据。
使用CSS动画实现滚动的效果。
将两个容器设置成相对定位，并让它们紧挨着。
使用JavaScript控制滚动公告的滚动，保证两个组件始终保持同步。

按照这些步骤，就能轻松实现衔接滚动，滚动时前后滚动自然，看不出分界线。

用Vue实现

这里以Vue为主，讲解一下如何实现交替滚动。

<template>
  <div class="container">
    <div class="slider">
      <div class="slider-item" v-for="item in items" :key="item.id">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: '公告1' },
        { id: 2, content: '公告2' },
        { id: 3, content: '公告3' }
      ]
    };
  },
  mounted() {
    this.slider = this.$refs.slider;
    this.sliderItemHeight = this.slider.children[0].offsetHeight;

    this.cloneFirstItem();
    this.cloneLastItem();

    this.start();
  },
  methods: {
    start() {
      this.interval = setInterval(() => {
        this.slider.style.transform = `translateY(-${this.sliderItemHeight}px)`;

        setTimeout(() => {
          this.slider.style.transition = 'none';
          this.slider.style.transform = 'translateY(0)';

          this.removeFirstItem();
          this.cloneLastItem();
          this.slider.style.transition = 'transform .5s';
        }, 500);
      }, 2000);
    },
    cloneFirstItem() {
      const firstItem = this.slider.children[0].cloneNode(true);
      this.slider.appendChild(firstItem);
    },
    cloneLastItem() {
      const lastItem = this.slider.children[this.slider.children.length - 1].cloneNode(true);
      this.slider.insertBefore(lastItem, this.slider.children[0]);
    },
    removeFirstItem() {
      this.slider.removeChild(this.slider.children[0]);
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform .5s;
}

.slider-item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>