uniapp完成一个商品左右菜单互连的组件（代码加注解原理）_uniapp中间一个盒子左右盒子与他对齐上下盒子也与他对齐-CSDN博客

本文链接：https://blog.csdn.net/work33/article/details/119929629

本文介绍了如何使用uniapp创建一个商品左右菜单互连的组件。首先确保两部分可滑动，然后点击左边菜单时，右边相应内容滚动到顶部。同时，计算并调整左侧菜单选中项居中。监听右侧滚动，同步更新左侧菜单。解决滚动不畅问题，如检查父元素尺寸、子元素排列及overflow属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：
1.首先让两块区域各自滑动起来
2.当点击左边的item，右边对应的item就要滑到顶部。这时候就要获取到右边每个item到顶部的距离。然后再减掉不需要的元素位置。让scroll-top=该item距离顶部的位置
3.让左边菜单栏，每次点击的item都显示在中间。那么就要通过计算左边每个item的高度和整个左边菜单栏的高度并进行计算
4.在右边滚动时要进行监听，滚动到某个位置之后左边也要对应上所以就要调用对应的方法

<template>
	<view class="u-warp">
		<!-- 搜索 -->
		<view class="u-search-box">
			<view class="u-search-inner">
				<u-icon class="search-icon" name="search" color="#ccc" size="35"></u-icon>
				<u-input type="text" placeholder="请输入搜索关键字" />
			</view>
		</view>
		<!-- 内容 -->
		<view class="u-content-box">

			<!-- z左边 -->
			<scroll-view
			 scroll-with-animation
			  scroll-y="true" //开启滑动
			  :scroll-top="LeftScrollTop"   //动态设置滑动的位置在那
			  :scroll-into-view="itemId"    //没作用，可用于测试
				class="left-scroll menu-scroll-view">
				<view @tap.stop='switchTab(index)' class="u-tab-item" :class="[current == index? 'tab-action' :'']"
					v-for="(item,index) in data" :key='index'>
					<text>{
   
   {
   
   item}}</text>
				</view>
			</scroll-view>

			<!-- z右边 -->
			<scroll-view 
			scroll-y="true" 
			:scroll-top="RightScrollTop"
			 scroll-with-animation 
			 @scroll='rightScroll'
			 class="right-scroll">
				<view class="page-view">
					<view class="goods-item" :id="'item'+index" v-for="(item,index) in data" :key='index'>
						<view class="goods-title">
							<u-divider class="u-divider" color="#000" fontSize='35'
								style="background-color: transparent;">{
   
   {
   
   item}}</u-divider>
						</view>
						<!-- 类目 -->
						<view class="goods-category">
							<view class="category" v-for="(item,index) in category" :key='index'>
								{
   
   {
   
   item}}
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-details-box" v-for="(item,index) in 5" :key='index'>
							<view class="goods-text-box">
								<!-- <image src="" ></image> -->
								<view class="img">
									<image src="../../static/1.jpg" mode=""></image>
								</view>
								<view class="goods-text">
									<text class