zhywpt-sp/pages/service/components/rightList.vue

<template>
	<view class='right-contaienr'>
		<scroll-view scroll-y="true" :style='{height:scrollHeight}'>
			<view v-for="(item,index) in menuList" :key='index' class="item-box" @click="toNext(item.link)">
				<view class="l-img bg-blue" :style="{ '--background': bgBlue }">
					<image :src="`${fileURLList}${item.iconPath}`" mode="aspectFit" class='img' />
				</view>
				<view class="r-info">
					<view class="title-text">{{item.name}}</view>
					<view class="title-desc">查看{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive, onMounted,
		getCurrentInstance,
		defineProps
	} from "vue";
	import {
		fileURL, fileURLList
	} from "@/datas/fileURL.js";
	const bgBlue = `url(${fileURL}image/newHome/more-bg.png) center center no-repeat`;
	defineProps({
		menuList: {
			type: Array,
			default: () => []
		},

	})
	const instance = getCurrentInstance();
	const scrollHeight = ref('100%')
	onMounted(() => {
		let windowHeight = uni.getSystemInfoSync().windowHeight
		const query = uni.createSelectorQuery().in(instance.proxy)
		query
			.select(".right-contaienr")
			.boundingClientRect((data) => {
				console.log("得到布局位置信息", data);
				console.log("节点离页面顶部的距离为" + data.top, windowHeight);
				scrollHeight.value = (windowHeight - data.top) + 'px'
			})
			.exec();

	})
	function toNext(url) {
		uni.navigateTo({
			url: url,
		});
	}
</script>

<style lang='scss' scoped>
	.right-contaienr {
		overflow: hidden;

		.scroll-Y {
			height: 100%;
		}

		.item-box {
			display: flex;
			padding-bottom: 30rpx;

		}

		.l-img {
			width: 105rpx;
			height: 105rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.r-info {
			margin-left: 19rpx;
			font-family: MicrosoftYaHei;

			.title-text {
				font-size: 28rpx;
				color: #01243A;
				margin-top: 5rpx;
			}

			.title-desc {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
</style>