uniapp侧边导航栏大概思路

效果

实际代码

<template>
	<view class="content">
		<scroll-view scroll-y="true" class="nave-left" :scroll-into-view="scrollToLeft">
			<view class="scroll">
				<view
					class="goods-type"
					:class="{ isSelect: scrollToLeft === 'idx' + index }"
					v-for="(val, index) in items"
					:key="index"
					@click="scrollRight(index)"
					:id="'idx' + index"
				>
					{{ val.name }}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="nav-right" :scroll-into-view="scrollToRight" scroll-with-animation="" @scroll="scrolling">
			<view class="scroll">
				<view class="goods-list" v-for="(val, index) in items" :key="index" :id="'id' + index">
					<view class="goods-head">{{ val.name }}</view>
					<view class="goods-body" v-for="(item, idx) in val.children" :key="idx">{{ item.name }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'goodsSecond',
	data() {
		return {
			scrollToRight: '',
			nodeHeight: [],
			scrollToLeft: 'idx0',

			items: [
				{
					name: 'A',
					children: [
						{
							name: 'A1'
						},
						{
							name: 'A2'
						},
						{
							name: 'A3'
						},
						{
							name: 'A1'
						},
						{
							name: 'A2'
						},
						{
							name: 'A3'
						}
					]
				},
				{
					name: 'B',
					children: [
						{
							name: 'B1'
						},
						{
							name: 'B2'
						},
						{
							name: 'B3'
						},
						{
							name: 'B1'
						},
						{
							name: 'B2'
						},
						{
							name: 'B3'
						}
					]
				},
				{
					name: 'C',
					children: [
						{
							name: 'C1'
						},
						{
							name: 'C2'
						},
						{
							name: 'C3'
						},
						{
							name: 'C1'
						},
						{
							name: 'C2'
						},
						{
							name: 'C3'
						}
					]
				}
			]
		};
	},
	mounted() {
		this.getGoodsLsit();
	},
	methods: {
		getGoodsLsit() {
			let view = uni
				.createSelectorQuery()
				.in(this)
				.selectAll('.goods-list');

			view.boundingClientRect(data => {
				console.log('得到布局位置信息');
				this.nodeHeight = data;
				console.log(data);
			}).exec();
		},
		scrollRight(index) {
			this.scrollToRight = 'id' + index;
			this.scrollToLeft = 'idx' + index;
		},
		scrolling(e) {
			this.scrollLeft(Math.ceil(e.detail.scrollTop));
			console.log(e.detail);
		},
		scrollLeft(e) {
			for (let i = 2; i < this.nodeHeight.length; i++) {
				if (e > this.nodeHeight[i - 1].top && e < this.nodeHeight[i].top) {
					this.scrollToLeft = 'idx' + (i - 1);
				} else if (e > this.nodeHeight[this.nodeHeight.length - 1].top) {
					this.scrollToLeft = 'idx' + (this.nodeHeight.length - 1);
				} else if (e < this.nodeHeight[1].top) {
					this.scrollToLeft = 'idx0';
					this.scrollToRight = 'id0';
				}
				this.scrollToRight = '';
			}
		}
	}
};
</script>

<style>
.content {
	width: 100%;
	height: 100%;
	display: flex;
}

.nave-left {
	width: 187rpx;
	height: 100%;
}
.nav-right {
	width: 562rpx;
	height: 100%;
}
.scroll {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.goods-type {
	width: 150rpx;
	height: 80rpx;
	box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
	border-radius: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 24rpx;
	font-family: Microsoft YaHei UI;
	font-weight: 400;
	color: #a1a1a1;
}

.isSelect {
	border: 2rpx solid rgb(206, 148, 5);
}

.goods-list {
	width: 500rpx;
}
.goods-head {
	width: 500rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
}
.goods-body {
	width: 500rpx;
	height: 150rpx;

	display: flex;
	align-items: center;

	box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
	border-radius: 20px;
}
</style>

下面是思路

结构

<view class="nav">
	 <scroll-view scroll-y="true" class="nav-left" :scroll-top="scrollLeftTop" scroll-with-animation>//左侧一个scroll，scroll-top决定左侧scroll滑动到顶部的位置，scroll-with-animation加个动画
	 
		<view :id="'id' + val" class="menu"  v-for="val in 15" @click="categoryClick(index)">//点击事件触发右侧scroll-into-view滑动到子元素位置
		//分类标题
		</view>
		
	</scroll-view>
x
	<scroll-view scroll-y="true" class="nav-right" :scroll-into-view="'idx' + scrollRightTop" @scroll="scrollTop" scroll-with-animation>//右侧详细的商品，scroll-into-view决定滚动到相应的子元素的位置上，@scroll滚动时触发
		
		<swiper class="swiper" circular="true" autoplay="true" interval="5000" duration="500" indicator-dots="true" indicator-active-color="#ffffff">//右侧滑动
			
			<swiper-item v-for="(img, imgId) in banImg" :key="imgId">
				//右侧的轮播图
				<image :src="img" mode="aspectFill"></image>
			
			</swiper-item>
		
		</swiper>
	<view :id="'id' + val" class="menuTitle" v-for="val in 15">//商品列表内容遍历
	{{val}}
	</view>
	
	</scroll-view>
	
</view>

样式

.nav{
width:100%;
height:100%;
display:flex;
}
.nav-left{
width:30%;
heght:100%;
display:flex;
flex-direction: column;
align-items: center;
}
.nav-right{
width:70%;
heght:100%;
display:flex;
flex-direction: column;
align-items: center;
}
//商品列表的内容样式自定义

交互

export default {
	data() {
		return {
			banImg: ['轮播图图片地址'],
			scrollLeftTop:'',//左侧滑动到相应子元素的索引
			scrollRightTop: ''//右侧滑动到相应子元素的索引
			arr:[]//右侧滑轮各个子元素距离实际顶部的距离，自行计算，或者通过
			
		};
	},
	methods: {
	categoryClick( index) {
			this.scrollRightTop == index ? (this.scrollRightTop =index  - 1) : (this.scrollRightTop = index );//点击左侧触发传输点击位置的索引，滑动右侧到对应的子元素中

			
		},
		scrollTop(e) {
			for (let i = 0; i < this.arr.length; i++) {//遍历各个元素距离顶部的距离
				if (i > 0 && (e.detail.scrollTop >= this.arr[i - 1] && e.detail.scrollTop < this.arr[i])) {//判断是否处于某两个子元素之间
					this.scrollLeftTop = i;//滑动左侧到对应的子元素中
					return false;
				} else if (i == 0 && e.detail.scrollTop < this.arr[i]) {//这个是判断是否第一个的，也可以在arr中的第一个加一个0
					this.scrollLeftTop = i;
					return false;
				}
			}
		}
	}
}