本文介绍了Vue实现左右菜单联动实现代码吗，分享给大家，也给自己留个笔记，具体如下：
Github
源码传送门： Rain120/vue-study
之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用
Vue 来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。
这个组件分为两个部分，1、左菜单；2、右菜单。 左菜单的
DOM 结构
<scroll
class="left-menu"
:data="leftMenu"
ref="leftMenu">
<div class="left-menu-container">
<ul>
<li
class="left-item"
ref="leftItem"
:class="{'current': currentIndex === index}"
@click="selectLeft(index, $event)"
v-for="(item, index) in leftMenu"
:key="index">
<p class="text">{{item}}</p>
</li>
</ul>
</div>
</scroll>右菜单的
DOM 结构
<scroll
class="right-menu"
:data="rightMenu"
ref="rightMenu"
@scroll="scrollHeight"
:listenScroll="true"
:probeType="3">
<div class="right-menu-container">
<ul>
<li class="right-item" ref="rightItem" v-for="(items, i) in rightMenu" :key="i">
<div class="data-wrapper">
<div class="title">{{items.title}}</div>
<div class="data" v-for="(item, j) in items.data" :key="j">{{item}}</div>
</div>
</li>
</ul>
</div>
</scroll>这里是为了做
demo ，所以在数据上只是单纯捏造。当然因为这是个子组件，我们将通过父组件传递
props ，所以定义
props
props: {
leftMenu: {
required: true,
type: Array,
default () {
return [] }
},
rightMenu: {
required: true,
type: Array,
default () {
return [] }
},
}
在这个业务场景中，我们的实现方式是根据右边菜单滚动的高度来计算左边菜单的位置，当然左边菜单也可以通过点击来确定右边菜单需要滚动多高的距离，那么我们如何获得该容器滚动的距离呢？ 之前一直在使用better-scroll，通过阅读文档，我们知道它有有
scroll 事件，我们可以通过监听这个事件来获取滚动的
