|
|
<template>
|
|
|
<div class="image-swipe" v-if="allLoaded">
|
|
|
<div class="image-swipe" v-if="showSwiper">
|
|
|
<div class="swipe-wrap" @click.prevent="showcase()">
|
|
|
<swiper :options="swiperOption" ref="swiper">
|
|
|
<swiper-slide v-for="item in goodsList" :key="item.title">
|
...
|
...
|
@@ -41,7 +41,7 @@ |
|
|
vm.setActiveSlide(swiper.realIndex)
|
|
|
}
|
|
|
},
|
|
|
allLoaded: false
|
|
|
showSwiper: false
|
|
|
};
|
|
|
},
|
|
|
components: {
|
...
|
...
|
@@ -59,49 +59,12 @@ |
|
|
let temp = val.slice();
|
|
|
const len = temp.length;
|
|
|
|
|
|
if (len > 1 && len < 4) {
|
|
|
if (len > 1) {
|
|
|
temp.unshift(temp.splice(len - 1)[0]);
|
|
|
}
|
|
|
|
|
|
if (len >= 4) {
|
|
|
const sp = temp.splice(0, 2);
|
|
|
|
|
|
temp.push(sp[0]);
|
|
|
temp.push(sp[1]);
|
|
|
}
|
|
|
this.goodsList = temp;
|
|
|
this.slideCount = this.goodsList.length;
|
|
|
},
|
|
|
goodsList(goods) {
|
|
|
const preloadImg = (list, loaded) => {
|
|
|
loaded = loaded || [];
|
|
|
|
|
|
// 加载完成
|
|
|
if(list.length === 0) {
|
|
|
let $ssr = document.getElementById('ssr');
|
|
|
$ssr && $ssr.remove();
|
|
|
this.allLoaded = true;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
let img = new Image();
|
|
|
img.src = util.getImgUrl(list[0].image_url, '580', '770');
|
|
|
|
|
|
if(img.complete) {
|
|
|
loaded.push(img);
|
|
|
list.shift();
|
|
|
preloadImg(list, loaded);
|
|
|
}
|
|
|
else {
|
|
|
img.onload = function() {
|
|
|
loaded.push(img);
|
|
|
list.shift();
|
|
|
preloadImg(list, loaded);
|
|
|
};
|
|
|
}
|
|
|
};
|
|
|
|
|
|
preloadImg(goods[0].images_list);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
...
|
...
|
@@ -122,25 +85,10 @@ |
|
|
this.activeIndex = this.calcIndex(idx);
|
|
|
},
|
|
|
calcIndex(realIdx){
|
|
|
const len = this.goods.length;
|
|
|
|
|
|
if (len >= 4) {
|
|
|
if (realIdx === len -1) {
|
|
|
realIdx = 0;
|
|
|
} else {
|
|
|
realIdx += 1;
|
|
|
}
|
|
|
|
|
|
if (realIdx < len -2) {
|
|
|
realIdx += 2;
|
|
|
} else if (realIdx === len -2) {
|
|
|
realIdx = 0;
|
|
|
} else {
|
|
|
realIdx = 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return realIdx;
|
|
|
},
|
|
|
show() {
|
|
|
this.showSwiper = true;
|
|
|
}
|
|
|
}
|
|
|
};
|
...
|
...
|
|