Vue3移动电商实战 —— 外卖移动端轮播图实现

写在前面

基于 Vue 3 实现了一个简单的轮播图功能，代码如下：

js 复制代码

<template>
   <div class="banner">
       <img v-for="(v,i) in bannerImg" :key="i" :src="`/src/assets/image/${v}`" v-show="n==i"/>
   </div>
</template>

<script setup>
import {ref,reactive,onMounted,onUnmounted} from 'vue'
import {bannerImg} from '@/utils/publicData'
let timer = null;
const n = ref(0);
// 挂载
onMounted(()=>{
    timer = setInterval(autoPlay,2000);
})
const autoPlay = ()=>{
    n.value++;
    if(n.value>=bannerImg.length){
        n.value = 0;
    }
}
// 销毁
onUnmounted(()=>{
    clearInterval(timer)
})
</script>

这段代码实现了一个简单的轮播图功能，基于 Vue 3 的 <script setup> 语法。以下是代码的总结和分析：

1. 功能概述

实现了一个轮播图组件，每隔 2 秒自动切换图片。
图片列表从外部引入，通过 v-for 动态渲染。
使用 v-show 控制当前显示的图片。
在组件挂载时启动定时器，在组件销毁时清除定时器。

2. 代码结构分析

（1）模板部分 (`<template>`)

vue 复制代码

<template>
   <div class="banner">
       <img v-for="(v,i) in bannerImg" :key="i" :src="`/src/assets/image/${v}`" v-show="n==i"/>
   </div>
</template>

v-for ：遍历 bannerImg 数组，动态生成 <img> 标签。
:src ：绑定图片路径，路径格式为 /src/assets/image/${v}，其中 v 是图片文件名。
v-show ：根据 n 的值决定是否显示当前图片。当 n == i 时，显示该图片。

（2）脚本部分 (`<script setup>`)

javascript 复制代码

import {ref,reactive,onMounted,onUnmounted} from 'vue'
import {bannerImg} from '@/utils/publicData'

let timer = null;
const n = ref(0);

// 挂载
onMounted(()=>{
    timer = setInterval(autoPlay,2000);
})

const autoPlay = ()=>{
    n.value++;
    if(n.value>=bannerImg.length){
        n.value = 0;
    }
}

// 销毁
onUnmounted(()=>{
    clearInterval(timer)
})

ref ：定义响应式变量 n，用于控制当前显示的图片索引。
onMounted ：组件挂载时启动定时器，每隔 2 秒调用 autoPlay 函数。
autoPlay ：每次执行时，n 的值加 1，如果 n 超过图片数量，则重置为 0，实现循环轮播。
onUnmounted：组件销毁时清除定时器，防止内存泄漏。

3. 关键点分析

（1）图片路径

图片路径通过模板字符串动态生成：/src/assets/image/${v}。
需要确保 bannerImg 中的文件名与 /src/assets/image/ 目录下的文件一一对应。

（2）轮播逻辑

使用 setInterval 实现自动轮播，每隔 2 秒切换一次图片。
通过 n 的值控制当前显示的图片索引，当 n 超过图片数量时重置为 0，实现循环。

（3）性能优化

使用 v-show 而不是 v-if，因为 v-show 只是切换 CSS 的 display 属性，不会频繁销毁和创建 DOM 元素，性能更好。

（4）内存管理

在 onUnmounted 中清除定时器，避免组件销毁后定时器仍然运行，导致内存泄漏。

4. 改进建议

（1）图片路径优化

如果图片较多，建议将图片路径存储在 bannerImg 中，而不是在模板中拼接路径。例如：
javascript 复制代码
```
const bannerImg = [
    require('@/assets/image/1.jpg'),
    require('@/assets/image/2.jpg'),
    // ...
];
```
这样可以避免路径错误，同时方便管理。

（2）添加过渡效果

可以为图片切换添加 CSS 过渡效果，提升用户体验。例如：
css 复制代码
```
.banner img {
    transition: opacity 0.5s;
}
.banner img:not([v-show]) {
    opacity: 0;
}
```

（3）手动切换功能

可以添加左右切换按钮，允许用户手动切换图片。

5. 总结

这段代码实现了一个简单的轮播图功能，代码结构清晰，功能完整。通过 v-for 动态渲染图片，使用 v-show 控制显示，结合 setInterval 实现自动轮播。同时，代码中考虑了内存管理，避免内存泄漏。如果需要进一步提升用户体验，可以添加过渡效果和手动切换功能。