JDF_ElectronicPublicity_uni/components/listModel/listModel.vue

<template>
	<view v-show="isShow" class="i-h-p100 i-flex i-al-center i-jst-center i-z-index3">
		<scroll-view ref="scrollView" scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
			class="i-h-p100 i-w-p100">
			<view class="i-flex i-al-center i-jst-center">
				<view class="i-w-p80 animate__animated"
					:class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
					<view class="i-h-110"></view>
					<uni-row>
						<uni-col :span="6" v-for="(item,index) in list" :key="index">
							<view class="i-flex i-al-center i-jst-center i-mt-26">
								<view class="i-pst-r i-h-p70 i-w-p90" @click="toDetail(item)">
									<image class="i-radius-20 i-w-p100" :class="styleType === 1?'i-h-350':'i-h-250'"
										mode="aspectFill" :src="item.detail_img">
									</image>
									<view class="i-c-fff i-z-index1 i-pst-a i-t-center i-w-p100 i-t-p35">
										<view>
											<span class="i-fs-26">{{item.title}}</span>
										</view>
										<view class="i-mt-10">
											<span class="i-fs-20">{{item.subtitle}}</span>
										</view>
									</view>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<view class="i-h-400"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "listModel",
		data() {
			return {
				scrollTop: 0
			};
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => ([])
			},
			// 页面状态 动画效果 1进入 2正常 3退出
			pageStatus: {
				type: Number,
				default: 1,
			},
			styleType: {
				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: {
			toDetail(item) {
				if (item.have_detail === 1) {
					this.$emit('toDetailEvent', item)
				} else {

				}
			},
		}
	}
</script>

<style>

</style>