微信小程序 - 实现左右菜单联动功能

  今天给大家分享一下如何实现微信小程序左右菜单栏联动效果（相关代码模块我已单独整理放到github上面了，欢迎前来start），具体过程如下：

效果图：

github地址：https://github.com/sunshime/weChatSkill

一、wxml文件

  这里需要注意的一点是：右边列表循环的那一项必须要加上 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="{
  {indexs}}" wx:for-index="indexs" wx:for-item="items">{
  {items}}</view>
			</view>
		</view>
	</scroll-view>
</view>

二、wxss文件

.link {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  width: 220rpx;
  /* 这里的高度可以写也可以不写，效果还是可以实现的，不过最好还是写上吧 */
  height: 100vh;
  background-color: rgb(229, 243, 243);
  text-align: center;
  color: