uni-app商城分类，侧边栏和商品

<template>
	<view class="row navBox" :style="scrollHeiht">
		<!-- 左侧一级分类列表 -->
		<scroll-view :scroll-top="scrollTopLeft" scroll-y class="leftNavBox col20-5 height-100">
			<view class="leftNavItem py-20 text-center" v-for="(item,index) in leftNavData" :key="index">
				<view @tap="leftTap(index)" :class="leftActiveIndex===index?'leftActive':''" class="leftNavContent py-10">
					{{item.title}}
				</view>
			</view>
		</scroll-view>

			<!-- 右侧二级分类列表 -->
		<scroll-view @scroll="rightScroll" :scroll-top="scrollTop" scroll-y class="rightNavBox col20-15 height-100" scroll-with-animation>
			<view class="rightNavItem row justify-content-space-around align-items-center" v-for="(item,index) in rightNavData" :key="index">
					<view class="font-bold text-center col-10">
						商品分类{{index+1}}
					</view>
					<view class="rightNavContent display-flex align-items-center justify-content-center flex-direction-column" v-for="(item1,index1) in item" :key="index1">
						<image :src="item1.url"></image>
						{{item1.title}}
					</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftActiveIndex: 0,
				leftNavData: [], /* 一级导航栏的所有数据 */
				rightNavData: [], /* 二级导航栏的所有数据 */
				scrollTop:0, 
				scrollHeiht:"",  /* 可视区域的高度 */
				leftScrollTop:[],    /*左侧每一个分类项距离顶部的高度*/
				rightScrollTop:[],   /*右侧每一个分类项距离顶部的高度*/
				leftNavItemHeight:0, /*左侧一个分类项的高度*/
				scrollTopLeft:0
			}
		},
		onLoad() {
			/* 获取屏幕可视区域的高度 */
			let height=uni.getSystemInfoSync().windowHeight
			this.scrollHeiht=`height:${height}px`
			
			/* 获取模拟数据 */
			for (var i = 0; i < 20; i++) {
				/* 左边数据 */
				let data = {
					title: `分类${i+1}`
				};
				this.leftNavData.push(data);
			
				/* 右边数据 | 二位数组 */
				this.rightNavData.push ([
					{
						url: "../../static/images/cate/cate_01.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_02.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_03.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_04.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_05.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_06.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_07.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_08.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_09.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_01.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_02.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_03.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_04.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_05.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_06.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_07.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_08.png",
						title: `分类${i+1}:商品`
					},
					{
						url: "../../static/images/cate/cate_09.png",
						title: `分类${i+1}:商品`
					}
				])
				//this.rightNavData.push(data2)
				
			}
			
		},
		onReady() {
			let query = uni.createSelectorQuery();
			
			/* 右侧商品分类距离顶部的距离的一个数组 */
			query.selectAll('.rightNavItem').boundingClientRect(data => {
				this.rightScrollTop=data.map(item=>item.top)
			}).exec();
			
			/* 左侧商品分类距离顶部的距离的一个数组 */
			query.selectAll(".leftNavItem").boundingClientRect(data=>{
				this.leftScrollTop=data.map(item=>item.top)
			}).exec(res=>{
				/*获取左侧一个分类项的高度*/
				this.leftNavItemHeight=this.leftScrollTop[1]-this.leftScrollTop[0];
			})
		},
		methods: {
			// 点击左边一级导航
			leftTap(index) {
				this.leftActiveIndex = index;
				this.scrollTop=this.rightScrollTop[index]
			},
			/* 右侧二级导航滚动事件 */
			rightScroll(event){
				// event.detail.scrollTop实时获取右侧商品距离顶部的距离 
				//this.rightScrollTop右侧商品分类距离顶部的距离
				this.rightScrollTop.forEach((item,index)=>{
					if(item<=event.detail.scrollTop){
						this.leftActiveIndex=index
					}
				})
			}
		},
		watch:{
			leftActiveIndex(newValue,oldValue){
				//console.log("新"+newValue)
				//console.log("旧"+oldValue)
				// 判断左侧scroll-view是否需要滚动
				uni.createSelectorQuery().select(".leftNavBox").fields({
					size:true,
					scrollOffset:true/* 超出顶部可视区域的距离 ，（滚上去以后的距离）*/
				},res=>{
					//this.leftScrollTop[newValue] 左侧每个元素距离顶部的距离
					//this.leftNavItemHeight 左侧每个元素的高度
					//res.scrollTop  超出顶部可视区域的距离 ，（滚上去以后的距离）
					let H=res.height /* 可视区域的高度（573）*/
					
					/* 判断是否需要向上滚动 */
					if(this.leftScrollTop[newValue]+ this.leftNavItemHeight>H + res.scrollTop){
						console.log("需要左侧向上滚动");
						this.scrollTopLeft=this.leftScrollTop[newValue] + this.leftNavItemHeight-H;
					}
					
					/* 判断是否需要向下滚动 */
					if(res.scrollTop>this.leftScrollTop[newValue]){
						this.scrollTopLeft=this.leftScrollTop[newValue];
					}
				}).exec()
			}
		}
	}
</script>

<style>
	.navBox {
		border-top: 1px solid #F1F1F1;
	}
	.leftNavBox{
		border-right: 1px solid #F1F1F1;
	}
	.leftNavItem {
		border-bottom: 1px solid #F1F1F1;
	}

	.leftNavContent {
		border-left: 3px solid transparent;
	}

	.leftActive {
		border-left: 3px solid #df6c1c;
	}
	.rightNavContent{
		margin:10upx;
	}
	.rightNavContent image{
		width: 120upx;
		height: 120upx;
		display: block;
	}
</style>