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