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

Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换

article 2025/1/31 12:16:19

使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router，并结合一些CSS样式来完成这个效果。

步骤

创建Vue项目：使用Vue CLI创建一个新的Vue项目。
准备图片：将需要展示的图片放在项目的public目录下。
创建组件：创建一个FullscreenImageSlider组件来实现图片滑动切换功能。
路由配置：在router/index.js中配置路由，将FullscreenImageSlider组件添加到路由中。
样式设计：使用CSS样式实现全屏显示和图片自适应。
实现滑动切换逻辑：使用JavaScript实现图片的平滑滑动切换。

详细代码及注释

1. 创建Vue项目

首先，确保已经安装了Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

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

vue create fullscreen-image-slider
cd fullscreen-image-slider

2. 准备图片

将需要展示的图片放在public目录下，例如public/images目录。

3. 创建组件

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

<template>
  <div class="fullscreen-slider">
    <!-- 图片容器 -->
    <div class="slider-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <!-- 遍历图片数组，渲染每个图片 -->
      <img
        v-for="(image, index) in images"
        :key="index"
        :src="`/images/${image}`"
        alt="Fullscreen Image"
        class="slider-image"
      />
    </div>
    <!-- 上一张按钮 -->
    <button class="slider-button prev" @click="prevImage">
      <i class="fas fa-chevron-left"></i>
    </button>
    <!-- 下一张按钮 -->
    <button class="slider-button next" @click="nextImage">
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义图片数组，这里假设图片名称为image1.jpg, image2.jpg, image3.jpg
const images = ref(['image1.jpg', 'image2.jpg', 'image3.jpg']);
// 当前显示的图片索引
const currentIndex = ref(0);

// 上一张图片的方法
const prevImage = () => {
  // 如果当前索引大于0，则将索引减1
  if (currentIndex.value > 0) {
    currentIndex.value--;
  } else {
    // 否则将索引设置为最后一张图片的索引
    currentIndex.value = images.value.length - 1;
  }
};

// 下一张图片的方法
const nextImage = () => {
  // 如果当前索引小于图片数组的长度减1，则将索引加1
  if (currentIndex.value < images.value.length - 1) {
    currentIndex.value++;
  } else {
    // 否则将索引设置为0
    currentIndex.value = 0;
  }
};
</script>

<style scoped>
.fullscreen-slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slider-container {
  display: flex;
  width: 300%; /* 根据图片数量调整宽度 */
  height: 100%;
  transition: transform 0.5s ease; /* 平滑过渡效果 */
}

.slider-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 图片自适应 */
}

.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>

4. 路由配置

在src/router/index.js中配置路由，将FullscreenImageSlider组件添加到路由中：

import { createRouter, createWebHistory } from 'vue-router';
import FullscreenImageSlider from '../components/FullscreenImageSlider.vue';

const routes = [
  {
    path: '/',
    name: 'FullscreenImageSlider',
    component: FullscreenImageSlider,
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

5. 修改`App.vue`

在src/App.vue中引入路由：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script setup>
</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>

使用说明

运行项目：在项目根目录下运行以下命令启动开发服务器：

npm run dev

添加图片：将需要展示的图片放在public/images目录下，并在FullscreenImageSlider.vue组件的images数组中添加图片名称。
浏览效果：打开浏览器，访问http://localhost:5173，即可看到全屏图片滑动切换的效果。点击左右箭头按钮可以切换图片。