yuxingu-Miniprogram-dev/pages/healing/healing-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 newHealingList" :key="index"
				style="width: 670rpx;height: 196rpx;background-color: #fff;margin-top: 14rpx;display: flex;flex-direction: column; align-items: center;justify-content: center;border-radius: 10rpx;">
				<view style="width: 630rpx;display: flex;flex-direction: row; align-items: center;justify-content:space-between;" @click="toHealingDetail(item)">
					<text style="color: #614D49;
						width: 350rpx;
						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>
					<image :src="item.showImage" style="width: 200rpx;height: 156rpx;border-radius: 10rpx;"></image>
				</view>
			</view>
					<view v-if="newHealingList.length==0" style="">
						<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 newHealingList = ref([])


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


	const toHealingDetail = (item) => {

		dohttp.navigateTo("/pages/healing-detail/healing-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=10', // 分享路径的参数
	  };
	};

	// 初始加载检查
	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>