vue商城商品详情大图、放大镜、轮播小图功能实现

黄哈哈_123

已于 2023-02-11 16:38:33 修改

阅读量2.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-10-12 15:40:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44997474/article/details/127283665

该博客详细介绍了如何在Vue.js前端项目中实现商品详情页的大图切换、放大镜效果以及轮播小图功能。利用vue-awesome-swiper轮播插件和vue-piczoom放大镜插件，通过数据绑定和事件处理来完成需求。同时，文章提到了在处理视频时的注意事项，并列举了在实现过程中遇到的三个bug及其解决方案，包括轮播图播放停止、自动切换失效和点击事件失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求图：

1.点击小图大图切换
2.小图可以左右切换
3.鼠标放在大图上可以放大查看图片
补充 4.有的商品详情有一个视频
在这里插入图片描述

实现：

使用了轮播图插件vue-awesome-swiper 和放大镜插件vue-piczoom，安装之后就可以使用了。

npm install vue-awesome-swiper@3 --save-dev
npm install vue-piczoom --save

		<div style="width: 285px; margin-right: 30px">
            <!-- 上 大图 -->
            <div style="width: 285px; height: 285px">
              <img :src="mainImgUrl" style="width: 100%; height: 100%" />
              <!-- 放大镜功能 -->
              <!-- <pic-zoom :url="mainImgUrl" :scale="3"  style="width: 100%; height: 100%"></pic-zoom> -->
            </div>

            <!-- 下 小图 -->
            <div class="recommendPage">
              <swiper
                :options="swiperOption"
                ref="mySwiper"
                class="swiper-wrapper"
              >
                <swiper-slide v-for="(i, index) in imgUrlList"