如何用uniapp做一个商品分类页面

直接贴代码了 主要用到了overflow-y这个属性 用fix定位固定头部，外层套一个有高度的盒子支撑，然后用到了calc() 计算中间盒子的高度

<template>
	<view class="container">
		<!-- 这里的高度为其他高度写死 包含头部导航栏、搜索框、大分类区的高度 -->
		<view style="height: 376rpx;">
			<view class="fix-box">
				<!-- 头部导航栏 -->
				<view class="nav-bar">
					<uni-nav-bar left-width="0" right-width="30vw" :fixed="true" color="#000"
						background-color="transparent" status-bar :border="false">
						<view class="nav-bar-middle">
							<view class="search-area">
								<image src="../../static/icon/search.svg" mode="aspectFill"></image>
								<input placeholder-class="input-placeholder" type="text" placeholder="请输入关键词"
									v-model="queryParam.value">
							</view>
						</view>
					</uni-nav-bar>
				</view>
				<view class="big-type-area">
					<scroll-view :scroll-into-view="bigType" class="scroll-view" :scroll-x="true">
						<view :id="item.id" @click="bigTypeChange(item,index)" v-for="(item,index) in bigTypeList"
							:key="index" class="scroll-item">
							<view
								:class="bigType == item.id? 'big-category-item big-category-item-s' : 'big-category-item'">
								<image src="../../static/image/category1.png" mode=""></image>
								<view class="label">{{item.label}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="bottom-area">
			<!-- 左边小分类区 -->
			<view class="small-type-area">
				<!-- <scroll-view :scroll-into-view="smallType" class="scroll-view" :scroll-y="true"> -->
				<view :id="item.id" @click="smallTypeChange(item,index)" v-for="(item,index) in smallTypeList"
					:key="index" class="scroll-item">
					<view
						:class="smallType == item.id? 'small-category-item small-category-item-s' : 'small-category-item'">
						<view class="label">{{item.label}}</view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>

			<!-- 右边商品区 -->
			<view class="goods-area">
				<view class="select-tab">
					<view v-for="item in selectTypeList" :key="item.id" class="select-tab-item">{{item.label}}</view>
				</view>
				<view class="list-area">
					<view v-for="(item,index) in goodsList" :key="index" class="list-item">
						<view class="left">
							<image :src="item.pic" mode=""></image>
						</view>
						<view class="right">
							<view class="name">{{item.name}}</view>
							<view class="desc">品种丰富 自由组合 广东发货</view>
							<view class="sale">已售100+</view>
							<view class="price-area">
								<view class="price"><text>￥</text>34</view>
								<view class="add">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


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

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		computed
	} from "vue"
	import tabbar from "@/components/tabbar/tabbar.vue"

	const bigType = ref()
	const bigTypeList = ref([{
		id: 1,
		label: "食品生鲜"
	}, {
		id: 2,
		label: "美妆个护"
	}, {
		id: 3,
		label: "服装配饰"
	}, {
		id: 4,
		label: "居家日用"
	}, {
		id: 5,
		label: "母婴用品"
	}])

	function bigTypeChange(item, index) {
		bigType.value = item.id
	}



	const selectType = ref()
	const selectTypeList = ref([{
		id: 1,
		label: "推荐"
	}, {
		id: 2,
		label: "销量"
	}, {
		id: 3,
		label: "价格"
	}])

	function selectTypeChange(item, index) {
		selectType.value = item.id
	}


	const smallType = ref()
	const smallTypeList = ref([{
			id: 1,
			label: "食品生鲜"
		}, {
			id: 2,
			label: "美妆个护"
		}, {
			id: 3,
			label: "服装配饰"
		}, {
			id: 4,
			label: "居家日用"
		}, {
			id: 5,
			label: "母婴用品"
		},
		{
			id: 6,
			label: "母婴用品"
		},
		{
			id: 7,
			label: "母婴用品"
		},
		{
			id: 8,
			label: "母婴用品"
		},
		{
			id: 9,
			label: "母婴用品"
		},
		{
			id: 10,
			label: "母婴用品"
		},
		{
			id: 11,
			label: "母婴用品"
		},
		{
			id: 12,
			label: "母婴用品"
		},
		{
			id: 13,
			label: "山珍系列"
		},
		{
			id: 14,
			label: "调味料"
		},
		{
			id: 14,
			label: "肉蛋奶"
		}
	])

	function smallTypeChange(item, index) {
		smallType.value = item.id
	}

	const myScroll = ref()

	const queryParam = reactive({
		value: ""
	})

	const goodsList = ref([{
		"id": 62,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/140eac0a9b30554690a6e363d2870f1d1709471115816.jpg",
		"name": "爱因斯坦的大脑",
		"price": 0.01
	}, {
		"id": 63,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/20c4b96f533de5448c8406250d300a2c68微信图片_20240320153500.png",
		"name": "来一份",
		"price": 0.01
	}, {
		"id": 64,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/229eb5f45836c24ac8b0046358f765d1adw5emtk6zi130xh96qv29b9yl087s4s383848.png",
		"name": "小新27 i7-13620H 27英寸 一体台式机白色",
		"price": 5299.00
	}, {
		"id": 65,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/229eb5f45836c24ac8b0046358f765d1adw5emtk6zi130xh96qv29b9yl087s4s383848.png",
		"name": "小新27 i7-13620H 27英寸 一体台式机白色",
		"price": 5299.00
	}, {
		"id": 67,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/229eb5f45836c24ac8b0046358f765d1adw5emtk6zi130xh96qv29b9yl087s4s383848.png",
		"name": "小新27 i7-13620H 27英寸 一体台式机白色",
		"price": 5299.00
	}, {
		"id": 68,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/20c4b96f533de5448c8406250d300a2c68微信图片_20240320153500.png",
		"name": "来伊份素烧玉米500g休闲零食童年小吃膨化玉米豆小包装非油炸即食",
		"price": 0.01
	}, {
		"id": 69,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/140eac0a9b30554690a6e363d2870f1d1709471115816.jpg",
		"name": "爱因斯坦的大脑",
		"price": 0.01
	}, {
		"id": 70,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/20c4b96f533de5448c8406250d300a2c68微信图片_20240320153500.png",
		"name": "来伊份素烧玉米500g休闲零食童年小吃膨化玉米豆小包装非油炸即食",
		"price": 0.01
	}, {
		"id": 71,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/229eb5f45836c24ac8b0046358f765d1adw5emtk6zi130xh96qv29b9yl087s4s383848.png",
		"name": "小新27 i7-13620H 27英寸 一体台式机白色",
		"price": 5299.00
	}, {
		"id": 72,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/140eac0a9b30554690a6e363d2870f1d1709471115816.jpg",
		"name": "爱因斯坦的大脑",
		"price": 0.01
	}, {
		"id": 73,
		"pic": "https://shenniudata-serverdata.oss-cn-beijing.aliyuncs.com//2024/03/20c4b96f533de5448c8406250d300a2c68微信图片_20240320153500.png",
		"name": "来伊份素烧玉米500g休闲零食童年小吃膨化玉米豆小包装非油炸即食",
		"price": 0.01
	}, {
		"id": 74,
		"pic": null,
		"name": "半只片皮烤鸭",
		"price": 45.00
	}])
</script>

<style lang="scss" scoped>
	.container {}

	.nav-bar-middle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.search-area {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 64rpx;
		height: 100%;
		box-sizing: border-box;
		height: 80%;
		width: 100%;
		padding-left: 24rpx;
		box-sizing: border-box;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 14rpx;
		}

		;

		input {
			flex: 1;
			font-size: 24rpx;
			color: #1c1c1e;

		}

		::v-deep .input-placeholder {
			color: #BBBCBE;
		}
	}


	.fix-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		color: #777;
		background: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
		z-index: 3;
		padding-bottom: 20rpx;
		background: linear-gradient(0deg, #FFF 0%, rgba(254, 230, 220, 1) 100%);
		box-shadow: 0px 2px 14px rgba(155, 157, 158, 0.1);
	}

	.big-type-area {
		.scroll-view {
			display: flex;
			// width: 90vw;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			// background-color: #fff;
			.scroll-item {
				height: 170rpx;
				padding: 0 3vw;
				font-weight: 400;
				font-size: 32rpx;
				color: #1c1c1e;
				flex-shrink: 0;
				display: inline-block;

				.big-category-item {
					height: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.label {
						font-size: 24rpx;
						color: #2E3434;
					}
				}

				.big-category-item-s {
					image {
						border: 6rpx solid #E02E24;
						box-sizing: border-box;
					}

					.label {
						background-color: #E02E24;
						color: #fff;
						padding: 4rpx 16rpx;
						border-radius: 32rpx;
					}
				}
			}
		}
	}


	.bottom-area {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 160rpx;
		overflow: hidden;

		.small-type-area {
			width: 336rpx;
			background: #F5F7F9FF;
			height: calc(100vh - 376rpx - 160rpx);
			overflow-y: scroll;

			.small-category-item {
				position: relative;
				padding: 32rpx 0;
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				color: #636363;
			}

			.small-category-item-s {
				background-color: #fff;
				font-weight: 500;
				color: #E02E24;
			}

			.small-category-item-s:after {
				position: absolute;
				content: " ";
				display: block;
				width: 8rpx;
				height: 50%;
				background-color: #E02E24;
				top: 50%;
				left: 0;
				border-radius: 2rpx;
				transform: translateY(-50%);
				border-radius: 3rpx;

			}
		}

		.goods-area {
			.select-tab {
				display: flex;
				align-items: center;
				padding: 20rpx 32rpx;

				.select-tab-item {
					text-align: center;
					line-height: 48rpx;
					border-radius: 64rpx;
					width: 100rpx;
					height: 48rpx;
					font-size: 22rpx;
					color: #676767;
					background-color: #F4F6F5;
					margin-right: 12rpx;
				}
			}

			.list-area {
				overflow-y: scroll;
				height: calc(100vh - 376rpx - 160rpx - 68rpx);

				.list-item {
					background-color: #FFF;
					display: flex;
					padding: 24rpx 20rpx 24rpx 16rpx;
					border-bottom: 2rpx solid #F8F8F8;

					.left {
						margin-right: 16rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 16rpx;
						}
					}

					.right {
						flex: 1;

						.name {
							font-weight: 500;
							font-size: 28rpx;
							color: #323031;
							margin-bottom: 12rpx;
						}

						.desc {
							font-size: 22rpx;
							color: #A48053;
							margin-bottom: 12rpx;
						}

						.sale {
							color: #A5A5A3;
							font-size: 22rpx;
							margin-bottom: 20rpx;
						}

						.price-area {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								font-size: 28rpx;
								color: #E83328;
								font-weight: 500;

								text {
									font-size: 24rpx;
								}
							}

							.add {
								color: #fff;
								width: 44rpx;
								height: 44rpx;
								text-align: center;
								line-height: 44rpx;
								background-color: #E02E24;
								border-radius: 50%;
							}
						}
					}
				}
			}


		}
	}
</style>