当前位置：首页 > article >正文

Vue.js组件开发-实现广告图片浮动随屏幕滚动

article 2025/2/6 4:36:57

实现步骤

创建 Vue 项目：使用 Vue CLI 快速搭建一个新的 Vue 项目。
编写 HTML 结构：在 Vue 组件中定义广告图片的 HTML 结构。
添加 CSS 样式：设置广告图片的初始样式和浮动效果。
添加 JavaScript 逻辑：监听窗口滚动事件，根据滚动位置更新广告图片的位置。

详细代码及注释

1. 创建 Vue 项目

安装 Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

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

vue create ad-floating-demo
cd ad-floating-demo

2. 编写组件代码

在 src/components 目录下创建一个名为 AdFloating.vue 的组件，代码如下：

<template>
  <!-- 广告图片容器 -->
  <div id="ad-floating" :style="{ top: adTop + 'px' }">
    <!-- 广告图片 -->
    <img src="https://via.placeholder.com/200x300" alt="广告图片" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 广告图片距离顶部的初始位置
      initialTop: 100,
      // 广告图片当前距离顶部的位置
      adTop: 100
    };
  },
  mounted() {
    // 当组件挂载完成后，监听窗口滚动事件
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 在组件销毁前，移除窗口滚动事件监听器，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 获取窗口滚动的垂直距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      // 更新广告图片的位置，使其跟随滚动
      this.adTop = this.initialTop + scrollTop;
    }
  }
};
</script>

<style scoped>
#ad-floating {
  /* 固定定位，使广告图片相对于浏览器窗口定位 */
  position: fixed;
  /* 距离右侧 20px */
  right: 20px;
  /* 初始距离顶部 100px */
  top: 100px;
  /* 设置广告图片容器的宽度 */
  width: 200px;
  /* 设置广告图片容器的高度 */
  height: 300px;
  /* 为广告图片容器添加边框 */
  border: 1px solid #ccc;
  /* 为广告图片容器添加内边距 */
  padding: 10px;
  /* 为广告图片容器添加背景颜色 */
  background-color: #fff;
  /* 为广告图片容器添加阴影效果 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#ad-floating img {
  /* 使图片宽度适应容器 */
  width: 100%;
  /* 使图片高度适应容器 */
  height: 100%;
  /* 保持图片的宽高比，同时覆盖整个容器 */
  object-fit: cover;
}
</style>

3. 在 `App.vue` 中使用组件

打开 src/App.vue 文件，将 AdFloating 组件引入并使用，代码如下：

<template>
  <div id="app">
    <!-- 引入 AdFloating 组件 -->
    <AdFloating />
    <!-- 模拟页面内容 -->
    <div style="height: 2000px; padding: 20px;">
      <h1>页面内容</h1>
      <p>这是一个模拟的页面内容，用于测试广告图片的浮动效果。</p>
    </div>
  </div>
</template>

<script>
// 引入 AdFloating 组件
import AdFloating from './components/AdFloating.vue';

export default {
  name: 'App',
  components: {
    // 注册 AdFloating 组件
    AdFloating
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>