目录
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
业务需求1:
完成小图的轮播图切换
<template>
<div class="swiper-container" ref="cur">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(slide,index) in skuImageList" :key="slide.id">
<img :src="slide.imgUrl">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
export default {
name: "ImageList",
props:['skuImageList'], //接收父组件Detail传过来的数据
watch:{
//监听数据:可以保证数据一定ok,但是不能保证v-for遍历结构是否完事
skuImageList(newValue,oldValue) {
//nextTick:在下次DOM更新 循环结束之后 执行延迟回调。在修改数据之后 立即使用这个方法,获取更新后的 DOM。
this.$nextTick(()=>{
//当你执行这个回调的时候,保证服务器数据回来了,v-for执行完毕了[一定轮播图的结构有了]
var mySwiper = new Swiper(this.$refs.cur, {
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})
}
}
}
</script>
<style lang="less" scoped>
.swiper-container {
height: 56px;
width: 412px;
box-sizing: border-box;
padding: 0 12px;
.swiper-slide {
width: 56px;
height: 56px;
img {
width: 100%;
height: 100%;
border: 1px solid #ccc;
padding: 2px;
width: 50px;
height: 50px;
display: block;
&.active {
border: 2px solid #f60;
padding: 1px;
}
&:hover {
border: 2px solid #f60;
padding: 1px;
}
}
}
.swiper-button-next {
left: auto;
right: 0;
}
.swiper-button-prev {
left: 0;
right: auto;
}
.swiper-button-next,
.swiper-button-prev {
box-sizing: border-box;
width: 12px;
height: 56px;
background: rgb(235, 235, 235);
border: 1px solid rgb(204, 204, 204);
top: 0;
margin-top: 0;
&::after {
font-size: 12px;
}
}
}
</style>
上面的代码写完后,我们会发现,每次只能显示一张轮播图,我们需要一次显示三张轮播图