標簽：組件 ack vertica put getter cti from 就會 spec
一，在detail組件中，向子組件zoom和 imglist傳遞數據，屬性傳遞，
1.父組件detail
computed: {
...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList",‘imgList‘])
},
向子組件傳遞數據
子組件接收
props:[‘imgList‘],
zoom子組件填充數據
注；此時控制臺會報錯， a.b.c假報錯問題，
解決方式，此時需要判斷imglist
再次填充數據
<div class="spec-preview"> <img :src="defaultImg.imgUrl" /> <div class="event" @mousemove="move"></div> <div class="big"> <img :src="defaultImg.imgUrl" ref="bigImg"/> </div> <div class="mask" ref="mask"></div> </div>
二，小圖列表點擊，切換類
1.在imageslist組件中定義初始索引
data() {
return {
currentIndex: 0
};
},
類名
.active {
border: 2px solid #f60;
padding: 1px;
}
2.點擊小圖，切換類
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
回調函數，跟新索引，
methods: {
changeIndex(index) {
this.currentIndex = index;
三，點擊小圖，切換一樣的中圖
1.在imagelist中點擊小圖，回調中傳遞index，用全局事件總線傳遞index,傳遞給兄弟組件zoom
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
點擊事件回調函數，搞事件總線，$emitc觸發，傳遞index
methods: {
changeIndex(index) {
this.currentIndex = index;
this.$bus.$emit("changeDefaultIndex", index);
}
},
在zoom組件中，監聽
mounted(){
this.$bus.$on(‘changeDefaultIndex‘,this.changeDefaultIndex)
},
回調函數，跟新當前索引
methods:{
changeDefaultIndex(index){
this.defaultIndex = index
},
四，小圖片的輪播圖處理
1.html模板
<div class="swiper-container" ref="imglist"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
2.引入swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3. 在實例化swiper
watch: {
imgList: {
handler() {
//Vue.nextTick或者vm.$nextTick是一樣的功能
//在最近的一次dom更新之后執行nextTick里面傳的回調函數
this.$nextTick(() => {
new Swiper(this.$refs.imglist, {
// direction: "vertical", // 垂直切換選項
// autoplay:true,//等同于以下設置
// loop: true, // 循環模式選項
// // 如果需要分頁器
// pagination: {
// el: ".swiper-pagination"
// },
// 如果需要前進后退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
slidesPerGroup:5, //點擊一下滑動一組有多少張
slidesPerView:5 //一屏顯示多少張
// 如果需要滾動條
// scrollbar: {
// el: ".swiper-scrollbar"
// }
});
});
},
immediate: true //立即執行，在最近dom更新之前就會執行
}
}
標簽：組件 ack vertica put getter cti from 就會 spec
原文地址：https://www.cnblogs.com/fsg6/p/13357028.html
