vue|vue 实现类似淘宝的商品详情页的商品展示 vue实现类似淘宝的商品详情页

vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述：
图片大图自动轮播展示，下面的缩略图跟着变化，点击小图切换到对应的大图，大图停止自动轮播

文章图片

实现代码
HTML代码

="swiperOptionTop" class="gallery-top imgs" ref="swiperTop"> ="slide-1 imgsList" v-for="item in imageData"> 文章图片 ="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"> ="slide-1" v-for="item in imageData"> 文章图片

script代码

import { swiper, swiperSlide } from "vue-awesome-swiper"; export default { components: { swiper, swiperSlide }, data() { return { swiperOptionTop: { effect: "fade", orderType: 0, spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, }, swiperOptionThumbs: { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, // autoplay:true autoplay: { delay: 4000, speed: 1500, disableOnInteraction: true //点击小图之后停止自动轮播 } }, swiperSlides: [] }， mounted() { /*商品轮播开始*/ this.$nextTick(() => { const swiperTop = this.$refs.swiperTop.swiper const swiperThumbs = this.$refs.swiperThumbs.swiper swiperTop.controller.control = swiperThumbs swiperThumbs.controller.control = swiperTop }) /*商品轮播结束*/ } }

【vue|vue 实现类似淘宝的商品详情页的商品展示】css代码

.imgList{ width: 450px; height: 100px; margin-top: 20px; display: flex; overflow-x: auto; overflow-y: hidden; } .imgListShow{ flex-shrink: 0; width: 100px; height: 100%; float: left; margin-right: 10px; border: 2px solid #ccc; box-sizing: border-box; } .imgListShow.active{ border: 2px solid #1989FA; } .imgListShow img{ display: block; width: 100%; height: 100%; } .imgs{ width: 450px; height: 450px; } .imgsList{ width: 100%; height: 100%; } .imgsList img{ display: block; width: 100%; height: 100%; } .gallery-thumbs { height: 20%!important; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide img{ display: block; width: 100px; height: 100px; } .gallery-thumbs .swiper-slide-active { opacity: 1; } //用来改变按钮的颜色 .swiper-button-prev{ background-image:url("data:image/svg+xml; charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next{ background-image:url("data:image/svg+xml; charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E"); }