微信小程序左边导航栏与右边内容联动效果实现

要实现微信小程序左边导航栏与右边内容联动效果，可以使用组件和事件的方式来实现。

1. 首先，在wxml文件中添加左侧导航栏组件，如`scroll-view`组件。

2. 在js文件中定义数据，保存导航栏和内容的信息，如：

   data: {
     navList: [{id: 1, name: '导航1'}, {id: 2, name: '导航2'}, {id: 3, name: '导航3'}],
     currentNavId: 1
   }

`navList`保存导航栏的信息，`currentNavId`保存当前选中的导航栏id。

3. 在wxml文件中添加右侧内容的组件，如`view`组件，并绑定一个`scroll-into-view`的属性，将其值绑定到当前选中的导航栏id，实现联动效果。

   <view scroll-into-view="{{ 'nav' + currentNavId }}"></view>

4. 在左侧导航栏组件中，添加`bindtap`事件，当点击某一个导航栏时，将当前导航栏id保存到`currentNavId`中，并触发`scroll-into-view`事件，实现联动效果。

   <scroll-view scroll-y="true">
     <view wx:for="{{ navList }}" wx:key="{{ item.id }}" bindtap="changeNav" id="{{ 'nav' + item.id }}">{{ item.name }}</view>
   </scroll-view>

   changeNav: function (e) {
     const navId = e.currentTarget.id.replace('nav', '');
     this.setData({
       currentNavId: navId
     });
   }

这样，就可以实现微信小程序左侧导航栏与右侧内容联动的效果了。