JDF_ElectronicPublicity_uni/components/homeDetails/homeDetails.vue

<template>
	<view v-show="isShow" class="i-h-p100">
		<scroll-view scroll-y="true" class="i-h-v100" :scroll-top="scrollTop">
			<view class="animate__animated" :class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
				<view class="i-h-200"></view>
				<view class="i-h-p100 i-flex i-al-center i-jst-center ">
					<view class="i-w-p80">
						<view class="i-w-p100">
							<image class="i-w-p100 i-radius-20" :style="'height:'+imageHeight+'px'" mode="widthFix" ref="longImage" :src="itemInfo.img" @load="onImageLoad">
							</image>
						</view>
					</view>
				</view>
				<view class="i-h-200"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "homeDetails",
		data() {
			return {
				scrollTop: 0,
				imageHeight:0
			};
		},
		props: {
			itemInfo: {
				type: Object,
				required: true,
			},
			isShow: {
				type: Boolean,
				default: false,
			},
			// 页面状态
			pageStatus: {
				type: Number,
				default: 1,
			},
		},
		watch: {
			isShow(newVal) {
				if (newVal) {
					// 强制重置滚动位置
					this.scrollTop = 0; // 先设置为 0
					this.$nextTick(() => {
						this.scrollTop = 1; // 强制触发滚动
						this.$nextTick(() => {
							this.scrollTop = 0; // 再次设置为 0
						});
					});
				}
			}
		},
		methods: {
			// 图片加载时重设image高度
			onImageLoad(event){
				this.imageHeight = event.detail.height;
			}
		},
	};
</script>

<style scoped>
</style>