vue 实现类似淘宝的商品详情页的商品展示
利用vue和swiper实现缩略图控制 / Swiper互相控制
具体需求描述：
图片大图自动轮播展示，下面的缩略图跟着变化，点击小图切换到对应的大图，大图停止自动轮播
实现代码
HTML代码
<swiper :options="swiperOptionTop" class="gallery-top imgs" ref="swiperTop"><swiper-slide class="slide-1 imgsList" v-for="item in imageData"><img :src="item" alt=""></swiper-slide><div class="swiper-button-next swiper-button-black" slot="button-next"></div><div class="swiper-button-prev swiper-button-black" slot="button-prev"></div></swiper><!-- swiper2 Thumbs --><swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"><swiper-slide class="slide-1" v-for="item in imageData"><img :src="item" alt=""></swiper-slide></swiper>
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:trueautoplay: {delay: 4000,speed: 1500,disableOnInteraction: true//点击小图之后停止自动轮播}},swiperSlides: []}，mounted() {/*商品轮播开始*/this.$nextTick(() => {const swiperTop = this.$refs.swiperTop.swiperconst swiperThumbs = this.$refs.swiperThumbs.swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})/*商品轮播结束*/}}
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%%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%%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");}
