uniapp：完成商品分类页面（scroll-view），左侧导航，右侧商品

scroll-view

scroll-y					允许纵向滚动
scroll-top					设置竖向滚动条位置
scroll-with-animation		在设置滚动条位置时使用动画过渡

使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；
可以使用css 隐藏滚动条样式

/* 隐藏滚动条样式 */
::-webkit-scrollbar {
	width: 0;
	height: 0;
}

点击changeNav(index)方法使导航滚动，在计算scrollTop的滚动距离时，index-2是为了导航顶部总能显示2个nav-item，

<template>
	<view class="category">
		<view class="nav">
			<scroll-view 
				class="bg"
				scroll-y="true" 
				:scroll-top="scrollTop" 
				:scroll-with-animation="true">
				<view class="nav-item" 
					:class="{'ac':active == index}" 
					v-for="(item,index) in 28" 
					:key="index" 
					@click="changeNav(index)">
						女装{{index}}
					view>
			scroll-view>
		view>
		<view class="goodsBox">
			<scroll-view 
				scroll-y="true" >
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in 28" :key="index">
						<image src="../../static/logo.png" mode="">image>
						<text>uniapptext>
					view>
				view>
			scroll-view>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {
				active:0,
				scrollTop:0,
				height:0,
			}
		},
		onShow() {
			// 获取导航'.nav-item'的高度，在点击导航触发changeNav时，使其向下滚动
			this.$nextTick(()=>{
				let height = uni.createSelectorQuery().select(".nav-item");
				height.boundingClientRect((data)=> {
					this.height = data.height;
				}).exec()
			})
		},
		methods:{
			changeNav(index){
				this.active = index;
				this.scrollTop = this.height*(index-2);
				// 在这里请求接口 展示右侧商品数据
			}
		}
	}
script>
<style scoped lang="scss">
	.category{
		display: flex;
		position: absolute;
		width: 100%;
		height: calc(100% - var(--status-bar-height));
		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
		uni-scroll-view{
			height: 100%;
		}
		.bg{
			background:#F7F8F9 ;
		}
		.nav{
			width: 200rpx;
			.nav-item{
				width: 200rpx;
				height: 104rpx;
				line-height: 104rpx;
				background: #F7F8F9;
				font-size: 28rpx;
				color: #505660;
				text-align: center;
				position: relative;
			}
			.ac{
				color: #26A69A;
				font-size: 30rpx;
				background: #fff;
			}
			.ac:before{
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 104rpx;
				background: linear-gradient(180deg, #26A69A 0%, #4DB6AC 100%);
				border-radius: 2rpx;
			}
		}
		
		.goodsBox{
			width: 550rpx;
			padding-left: 50rpx;
			.goods{
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;
				.goods-item{
					text-align: center;
					margin-bottom: 56rpx;
					margin-right: 65rpx;
					uni-image{
						display: block;
						width: 100rpx;
						height: 100rpx;
						margin: 0 auto 32rpx;
						border-radius: 4rpx;
					}
					uni-text{
						font-size: 24rpx;
						color: #505660;
					}
				}
			}
		}
	}
style>

效果图