diff --git a/pkg_product/views/experienceProjectDetail.vue b/pkg_product/views/experienceProjectDetail.vue index 2afac84..89ff974 100644 --- a/pkg_product/views/experienceProjectDetail.vue +++ b/pkg_product/views/experienceProjectDetail.vue @@ -92,20 +92,23 @@ - + @@ -191,7 +194,9 @@ export default { projectList: [], userLatitude: null, userLongitude: null, - distanceText: '' + distanceText: '', + currentExperienceIndex: 0, + experienceSwiperHeight: 0 } }, computed: { @@ -268,6 +273,24 @@ export default { this.videoContext.play() } }, + handleExperienceSwiperChange(e) { + this.currentExperienceIndex = e.detail.current || 0 + this.updateExperienceSwiperHeight(this.currentExperienceIndex) + }, + onExperienceImageLoad() { + this.updateExperienceSwiperHeight(this.currentExperienceIndex) + }, + updateExperienceSwiperHeight(index) { + const targetIndex = Number.isInteger(index) ? index : this.currentExperienceIndex + this.$nextTick(() => { + const query = uni.createSelectorQuery().in(this) + query.select('#experience-card-' + targetIndex).boundingClientRect(rect => { + if (rect && rect.height) { + this.experienceSwiperHeight = rect.height + } + }).exec() + }) + }, fetchProjectDetail() { if (!this.experienceMerchantId) { return @@ -317,10 +340,15 @@ export default { } if (project.projectList && project.projectList.length) { this.projectList = project.projectList + this.currentExperienceIndex = 0 this.detailList = project.projectList.map(item => ({ name: item.projectName || '', count: item.projectIntro || '' })) + this.updateExperienceSwiperHeight(0) + setTimeout(() => { + this.updateExperienceSwiperHeight(0) + }, 200) } } }).finally(() => { @@ -620,7 +648,6 @@ export default { .experience-swiper { margin-top: 16rpx; width: 100%; - height: 520rpx; } .experience-image { width: 100%;