精彩！Vue 实现消息列表向上无缝滚动！丝滑...

点击上方 蓝字 关注我们

大家好，我是CodeQi！ 

最近，我的老板又给我布置了一个有趣的任务——实现一个消息列表向上无缝滚动的效果。

刚听到这个需求时，我差点以为要让我编写一个“电梯广告屏”！不过，作为一个乐于挑战的开发者，这种需求反而激发了我的兴趣。

于是，我带上 Vue.js，开始了这次“无缝滚动”的冒险之旅。今天，我就来分享一下我是如何一步步实现这个效果的。

项目初始化

首先，我们需要初始化一个 Vue 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create seamless-scroll
cd seamless-scroll

选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve

创建基础组件

在这个项目中，我们将创建一个基础组件 MessageList.vue，用于展示消息列表。

1. 创建组件文件

在 src/components 目录下创建一个 MessageList.vue 文件，并添加以下内容：

<template>
  <div class="message-list" ref="messageList">
    <div class="message-item" v-for="(message, index) in messages" :key="index">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    messages: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    startScrolling() {
      // 在这里添加滚动逻辑
    },
    stopScrolling() {
      // 在这里清除滚动逻辑
    }
  }
};
</script>

<style>
.message-list {
  overflow: hidden;
  height: 200px; /* 根据需要调整高度 */
  position: relative;
}
.message-item {
  height: 50px; /* 根据需要调整每个消息项的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

这个组件接收一个 messages 属性，用于传递消息列表，并在 mounted 生命周期钩子中启动滚动逻辑。

实现无缝滚动效果

2. 滚动逻辑

我们将在 startScrolling 方法中实现无缝滚动的逻辑。首先，需要将消息列表复制一份，以实现无缝效果。然后，通过不断改变 transform 属性来实现滚动效果。

<template>
  <div class="message-list" ref="messageList">
    <div class="message-wrapper" ref="messageWrapper">
      <div class="message-item" v-for="(message, index) in extendedMessages" :key="index">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    messages: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      extendedMessages: [],
      scrollInterval: null
    };
  },
  mounted() {
    this.extendedMessages = [...this.messages, ...this.messages];
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    startScrolling() {
      const messageList = this.$refs.messageList;
      const messageWrapper = this.$refs.messageWrapper;
      let scrollAmount = 0;

      this.scrollInterval = setInterval(() => {
        scrollAmount += 1;
        messageWrapper.style.transform = `translateY(-${scrollAmount}px)`;

        if (scrollAmount >= messageWrapper.clientHeight / 2) {
          scrollAmount = 0;
        }
      }, 20); // 根据需要调整滚动速度
    },
    stopScrolling() {
      clearInterval(this.scrollInterval);
    }
  }
};
</script>

<style>
.message-list {
  overflow: hidden;
  height: 200px; /* 根据需要调整高度 */
  position: relative;
}
.message-wrapper {
  transition: transform 0.1s linear;
}
.message-item {
  height: 50px; /* 根据需要调整每个消息项的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

在这个实现中，我们通过设置 setInterval 来不断改变 messageWrapper 的 transform 属性，使其产生滚动效果。当滚动到原始消息列表的一半时，重置滚动位置，实现无缝滚动。

优化与改进

3. 优化滚动效果

为了使滚动效果更加平滑，可以使用 requestAnimationFrame 替代 setInterval，这样可以更好地控制动画帧率。

methods: {
  startScrolling() {
    const messageList = this.$refs.messageList;
    const messageWrapper = this.$refs.messageWrapper;
    let scrollAmount = 0;

    const scroll = () => {
      scrollAmount += 1;
      messageWrapper.style.transform = `translateY(-${scrollAmount}px)`;

      if (scrollAmount >= messageWrapper.clientHeight / 2) {
        scrollAmount = 0;
      }

      this.scrollInterval = requestAnimationFrame(scroll);
    };

    this.scrollInterval = requestAnimationFrame(scroll);
  },
  stopScrolling() {
    cancelAnimationFrame(this.scrollInterval);
  }
}

4. 动态消息更新

当消息列表动态更新时，我们需要重新计算滚动逻辑。可以通过监听 messages 属性的变化来实现这一点。

watch: {
  messages: {
    handler() {
      this.extendedMessages = [...this.messages, ...this.messages];
      this.stopScrolling();
      this.startScrolling();
    },
    deep: true
  }
}

5. 添加组件到主应用

现在，我们已经完成了消息列表组件的实现，接下来将其添加到主应用中。

6. 创建主应用组件

在 src 目录下创建一个 App.vue 文件，并添加以下内容：

<template>
  <div id="app">
    <MessageList :messages="messages" />
    <button @click="addMessage">Add Message</button>
  </div>
</template>

<script>
import MessageList from './components/MessageList.vue';

export default {
  name: 'App',
  components: {
    MessageList
  },
  data() {
    return {
      messages: [
        'Message 1',
        'Message 2',
        'Message 3',
        'Message 4',
        'Message 5'
      ]
    };
  },
  methods: {
    addMessage() {
      this.messages.push(`Message ${this.messages.length + 1}`);
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

在这个主应用中，我们引入了 MessageList 组件，并定义了一些初始消息。我们还添加了一个按钮，用于动态添加新消息。

7. 修改 main.js 文件

确保在 src/main.js 文件中正确引入 App.vue：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

8. 运行应用

现在，你可以运行应用，查看消息列表的无缝滚动效果：

npm run serve

打开浏览器访问 http://localhost:8080，你应该会看到一个自动向上滚动的消息列表，以及一个用于添加新消息的按钮。

总结

通过本文的详细介绍，我们成功地使用 Vue.js 实现了一个消息列表向上无缝滚动的效果。我们首先初始化了一个 Vue 项目，然后创建了一个基础组件，并实现了滚动逻辑。接着，我们优化了滚动效果，并添加了动态消息更新的功能。最后，我们将组件添加到主应用中，完成了整个项目的搭建。

希望通过本文的介绍，大家能够更深入地了解 Vue.js 的使用方法，并在实际项目中灵活应用这些技巧，创造出更加丰富和有趣的用户体验。

祝你编码愉快！Happy coding!