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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45298700/article/details/102623250

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: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
   })
   /*商品轮播结束*/
   }
  }

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");
}