滚动动画的简单实现 - 无限循环，视觉乐趣永不停歇！

前端

2023-12-08 04:45:07

Vue中的无限循环滚动动画

滚动动画效果常用于制作新闻网站、博客或产品展示页面中的滚动列表或轮播。实现方式有很多种，在本文中，我们将使用Vue.js来构建一个简单的无限循环滚动动画效果。

效果预览

在开始编码之前，让我们先看看我们的目标效果：

[图片：无限循环滚动动画演示]

正如您所见，我们的滚动列表可以在列表末尾继续滚动，实现无缝循环。让我们来看看如何用Vue.js来实现这个效果。

代码实现

首先，我们需要创建一个Vue组件来处理动画效果。我们把它命名为<InfiniteScroll>，代码如下：

<template>
  <div class="infinite-scroll">
    <div class="scroll-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isScrolling: false,
      scrollTop: 0,
      scrollHeight: 0,
      clientHeight: 0,
    };
  },
  mounted() {
    this.bindScrollEvent();
  },
  beforeDestroy() {
    this.unbindScrollEvent();
  },
  methods: {
    bindScrollEvent() {
      window.addEventListener('scroll', this.handleScroll);
    },
    unbindScrollEvent() {
      window.removeEventListener('scroll', this.handleScroll);
    },
    handleScroll() {
      this.scrollTop = window.pageYOffset;
      this.scrollHeight = document.body.scrollHeight;
      this.clientHeight = document.documentElement.clientHeight;

      if (
        this.scrollTop + this.clientHeight >= this.scrollHeight &&
        !this.isScrolling
      ) {
        this.isScrolling = true;
        this.$emit('reach-bottom');
      }
    },
  },
};
</script>

<style>
.infinite-scroll {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
}

.scroll-container {
  position: relative;
}
</style>

<InfiniteScroll>组件主要做了以下事情：

通过mounted()和beforeDestroy()生命周期钩子绑定和解绑滚动事件监听器。
在handleScroll()方法中计算滚动条位置、页面滚动高度和浏览器窗口高度，并判断是否触发了滚动到底部的事件。
通过reach-bottom事件通知父组件滚动到底部，以便父组件做出相应的处理。

接下来，我们在父组件中使用<InfiniteScroll>组件：

<template>
  <div class="parent-component">
    <InfiniteScroll @reach-bottom="loadMoreData">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </InfiniteScroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
    };
  },
  mounted() {
    this.loadMoreData();
  },
  methods: {
    loadMoreData() {
      if (this.loading) {
        return;
      }

      this.loading = true;

      // 模拟从服务器获取数据
      setTimeout(() => {
        const newItems = [
          { id: 11, name: 'Item 11' },
          { id: 12, name: 'Item 12' },
          { id: 13, name: 'Item 13' },
        ];
        this.items = this.items.concat(newItems);
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style>
.parent-component {
  height: 100vh;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
}
</style>