yuxingu-Miniprogram-dev/pages/my-test/my-test.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" v-if="testList.length>0"   @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: 30rpx">

					<view v-for="(item,index) in testList" :key="index"
						style="width: 670rpx;margin-top: 20rpx;display: flex;height:  180rpx;
				align-items: center;justify-content: space-between;background:#FFFFFF;border-radius: 10rpx;padding-left: 20rpx;padding-right: 20rpx;">
						<view style="display: flex;">
							<image :src="item.testPic" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;">
							</image>
							<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
								<text style="color: #303044;
					font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
					font-size: 28rpx;
					line-height: normal;
					letter-spacing: 0px;">
									{{item.testName}}
								</text>
								<view style="margin-top: 2rpx;display: flex;align-items: center;">


									<rich-text style="color: #606271;
							font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
							font-size: 20rpx;
							font-weight: normal;
							line-height: normal;
							letter-spacing: 0px;" class="test-desc" :nodes="item.subTitle"></rich-text>
								</view>

								<text style="color: #EA4E2D;margin-top: 26rpx;
					font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
					font-size: 20rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0px;">
									测试于{{ item.startTime }}
								</text>

							</view>
						</view>
						<view style="width:fit-content;
					height: fit-content;
					border-radius: 2002rpx;
					opacity: 1;
					display: flex;
					padding: 8rpx 40rpx;justify-content: center;align-items: center;
					background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);" @click="toTestResult(item)">
							<text style="color: #FFFFFF;
					font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
					font-size: 28rpx;
					line-height: normal;
					letter-spacing: 0px;">
								查看
							</text>
						</view>
					</view>
				</view>
			</scroll-view>

      
      <view v-if="testList.length==0" style="margin-top: 50%; width: 100%; text-align: center;">
						<text style="color: #614D49;
						font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
						font-size: 28rpx;
						line-height: normal;
						letter-spacing: 0px;">暂无测评信息</text>
      </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 testList = ref([])

	const params = ref({
		pageNo: 1,
		pageSize: 20
	})
	onMounted(() => {
		testList.value = []
		getMyTest()
	})
	const getMyTest = () => {
		dohttp.post(urls.myTest, params.value).then((result) => {
			if (result.list) {
				testList.value.push(...result.list)
				// 数据更新后检查高度
				      nextTick(() => {
				        checkContentHeight()
				      })
			}
		})
	}


	const toTestResult = (item) => {

		uni.navigateTo({
			url: "/pages/test-result/test-result?resultId=" + item.testResultId,
			animationType: "pop-in"
		})

	}
	const scrolltolower = () => {

		params.value.pageNo += 1
		getMyTest()

	}
	const showHight = ref(0)
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync()
		  // 更精准的高度计算
		  showHight.value = (systemInfo.windowHeight * (750 / systemInfo.screenWidth)) - 200
	})
	
	// 新增代码
	import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'
	
	const instance = getCurrentInstance()
	const enableScroll = ref(false) // 新增动态滚动控制
	// 新增高度检查方法
	const checkContentHeight = () => {
	  const query = uni.createSelectorQuery().in(instance.proxy)
	  query.select('#contentContainer').boundingClientRect(rect => {
	    if (rect) {
	      // 转换为rpx比较
	      const contentHeightRpx = rect.height * (750 / uni.getSystemInfoSync().screenWidth)
	      enableScroll.value = contentHeightRpx > showHight.value
	      console.log('内容高度:', contentHeightRpx, '容器高度:', showHight.value)
	    }
	  }).exec()
	}
	
	// 初始加载检查
	onMounted(() => {
	  nextTick(checkContentHeight)
	})
	
	
	const onShareAppMessage = () => {
	  return {
	    title: '快来体验一下吧~',
	    path: '/pages/index/index', // 分享的路径
	  };
	};
	 
	const onShareTimeline = () => {
	  return {
	    title: '快来体验一下吧~',
	    query: 'id=6', // 分享路径的参数
	  };
	};
</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;
	}
/* 新增关键样式 */
#contentContainer {
  width: 100%;
  min-height: 100%; /* 确保内容容器撑开 */
}


	.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;
	}




	.test-desc {
		font-size: 24rpx;
		color: #888;
	}




	/* .scroll-style {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	} */
	
	.scroll-style {
	  box-sizing: border-box;
	  padding: 0 !important; /* 清除可能的内边距 */
	}
</style>