微信小程序 实现美团外卖 菜单分类,左右联动 效果

最近项目要求写一个美团菜单分类左右联动的需求 记录一下 

1,首先 需要使用到 scroll-view 组件 左右2边 都需要滑动 直接上代码

scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 id="scroll-{ {index}}"  这个必须要有 不然实现不了左边联动右边的效果

<view class="link">
	<!-- 左边 -->
	<scroll-view class="left" scroll-y scroll-with-animation scroll-top="{
  {scrollTops}}">
		<view class="item {
  {tabCur===index?'active':''}}" wx:for="{
  {list}}" wx:key="index" data-index="{
  {index}}" bindtap="tabNav">{
  {item.name}}</view>
	</scroll-view>

	<!-- 右边 -->
	<scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{
  {rightCur}}" bindscroll="scrollLink">
		<!-- 重点： id="scroll-{
  {index}}"  这个必须要有 不然实现不了左边联动右边的效果-->
		<view wx:for="{
  {list}}" wx:key="{
  {index}}" class="right-cont" id="scroll-{
  {index}}">
			<view class="title">{
  {item.name}}</view>
			<view class="content">
				<view class="list-item" wx:for="{
  {item.list}}" wx:key="{
  {