yuxingu-Miniprogram-dev/pages/healing/active-list.vue

<template>
	<view class="content">
		<view class="banner"></view>
		<view class="page">
			<myNav title="活动中心" bgColor="nonoe" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false">
			</myNav>
			<scroll-view :scroll-y="enableScroll" @scrolltolower="scrolltolower" class="scroll-style"
				:style="{ height: `${showHight}rpx` }">
				<view ref="contentRef" id="contentContainer" style="display:flex;align-items:center;flex-direction:column;margin-top: 40rpx">
					
					<view v-for="(item,index) in newActiveList" :key="index"
						style="width: 670rpx;height: 300rpx;border-radius: 10rpx; background-color: #fff;margin-top: 20rpx;display: flex;flex-direction: column; align-items: flex-start;justify-content: flex-start;">
						<view style="width: 670rpx;display: flex;flex-direction: column; align-items: flex-start;justify-content:center;" @click="toActiveDetail(item)">
							
							<image :src="item.showImage" style="width: 670rpx;height: 220rpx;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;"></image>
							<text style="color: #614D49;
							margin-left: 10rpx;
							margin-top: 14rpx;
								width: 650rpx;
								display: -webkit-box;
								  -webkit-box-orient: vertical;
								  -webkit-line-clamp: 3;
								  overflow: hidden;
								  text-overflow: ellipsis;
								  word-break: break-all;
								font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
								font-size: 28rpx;
								line-height: normal;
								letter-spacing: 0px;">
								{{item.title}}
							</text>
						</view>
					</view>
					<view v-if="newActiveList.length==0" style="margin-top: 50%;">
						<text style="color: #614D49;
						font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
						font-size: 28rpx;
						line-height: normal;
						letter-spacing: 0px;">
								暂无活动内容
							</text>
					</view>
				</view>

			</scroll-view>



		</view>
	</view>
</template>

<script setup>
	import myNav from '@/components/my-nav.vue'
	import {
		urls
	} from '@/util/apiUrl.js'
	import dohttp from '@/util/requestConfig.js'

	const newActiveList = ref([])


	onMounted(() => {
		getPsychicTest()
	})
	const getPsychicTest = () => {
	const param = ref({
		type: 2,
		pageNo: 1,
		pageSize: 10
	})
		dohttp.get(urls.newPageUrl, param.value).then((result) => {
			newActiveList.value = result.list
			// 确保图片加载完成
			nextTick(() => {
				setTimeout(() => {
					checkContentHeight()
					// 添加重试机制
					if (!enableScroll.value) setTimeout(checkContentHeight, 500)
				}, 300)
			})
		})
	}


	const toActiveDetail = (item) => {

		dohttp.navigateTo("/pages/healing-detail/active-detail?id=" + item.id)

	}

	// 新增代码
	import {
		ref,
		onMounted,
		nextTick,
		getCurrentInstance
	} from 'vue'
	const showHight = ref(0)
	const instance = getCurrentInstance()
	const enableScroll = ref(false) // 新增动态滚动控制
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync()
		// 更精准的高度计算
		showHight.value = (systemInfo.windowHeight * (750 / systemInfo.screenWidth)) - 200
	})


	// 新增高度检查方法
	const checkContentHeight = () => {
		const query = uni.createSelectorQuery().in(instance.proxy)
		query.select('#contentContainer').boundingClientRect(rect => {
			if (rect) {
				const systemInfo = uni.getSystemInfoSync()

				// 转换为rpx比较
				// 计算容器实际像素高度
				const containerHeightPx = (showHight.value * systemInfo.screenWidth) / 750
				const threshold = 5 // 容错阈值

				enableScroll.value = rect.height > (containerHeightPx + threshold)
				console.log('[Layout Debug]', {
					contentHeight: rect.height,
					containerPx: containerHeightPx,
					containerRpx: showHight.value,
					shouldScroll: enableScroll.value
				})
			}
		}).exec()
	}
	
	const onShareAppMessage = () => {
	  return {
        title: '快来体验一下吧~',
	    path: '/pages/index/index', // 分享的路径
	  };
	};
	 
	const onShareTimeline = () => {
	  return {
        title: '快来体验一下吧~',
	    query: 'id=9', // 分享路径的参数
	  };
	};

	// 初始加载检查
	onMounted(() => {
		nextTick(checkContentHeight)
	})
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/test-list-bg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.page {
		position: absolute;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.banner {
		background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/botton.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 750rpx;
		height: 660rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 0;
	}

	/* 修改 #contentContainer 样式 */
	#contentContainer {
		width: 100%;
		min-height: 100%;
		/* 新增关键属性 */
		flex-shrink: 0;
		/* 禁止收缩 */
		overflow: visible;
		/* 确保子元素不被裁剪 */
	}

	.scroll-style {
		box-sizing: border-box;
		padding: 0 !important;
		/* 清除可能的内边距 */
	}
</style>