本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下:
Github
源码传送门:Rain120/vue-study
之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用<代码> Vue>
这个组件分为两个部分,1,左菜单;2,右菜单。左菜单的DOM <代码> 结构
& lt;滚动
类=" left-menu "
:数据=" https://www.yisu.com/zixun/leftMenu "
ref=發eftMenu”比;
& lt; div类=發eft-menu-container”比;
& lt; ul>
李& lt;
类=" left-item "
ref=" leftItem "
:类="{“当前”:currentIndex===指数}”
@click=" selectLeft(指数、美元事件)”
v代表="(项目,索引)leftMenu”
:关键="指数”比;
& lt; p class=" text "在{{项}}& lt;/p>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/scroll>
右菜单的DOM <代码> 结构
& lt;滚动
类="右键菜单"
:数据=" https://www.yisu.com/zixun/rightMenu "
ref=" rightMenu "
@scroll=" scrollHeight "
:listenScroll=" true "
:probeType=?”在
& lt; div类=皉ight-menu-container”比;
& lt; ul>
& lt;李类=" right-item " ref=v代表“rightItem”=?我)项目,在rightMenu”:关键=拔摇北?
& lt; div类=笆莅啊北?
& lt; div类="标题"在{{items.title}} & lt;/div>
& lt; div类=v=笆?项目,j)项目。数据”:键=" j "在{{项}}& lt;/div>
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/scroll>
这里是为了做<代码>演示>
当然因为这是个子组件,我们将通过父组件传递<代码>道具> 道具
道具:{
leftMenu: {
要求:没错,
类型:数组,
默认(){
返回[]
}
},
rightMenu: {
要求:没错,
类型:数组,
默认(){
返回[]
}
},
}
在这个业务场景中,我们的实现方式是根据右边菜单滚动的高度来计算左边菜单的位置,当然左边菜单也可以通过点击来确定右边菜单需要滚动多高的距离,那么我们如何获得该容器滚动的距离呢?之前一直在使用better-scroll,通过阅读文档,我们知道它有有<代码> 滚动事件,我们可以通过监听这个事件来获取滚动的pos <代码>
如果(this.listenScroll) {
我=this.scroll。(“滚动”,(pos)=比;{
我。发出(“滚动”,pos)美元
}）
}
所以我们在右边菜单的<代码> 组滚动件上监听滚动事件
@scroll=" scrollHeight "
方法
scrollHeight (pos) {
console.log (pos);
这一点。scrollY=Math.abs (Math.round (pos.y))
},
我们将监听得到的pos打出来看看
我们可以看到控制台打出了当前滚动的pos信息,因为在移动端开发时,坐标轴和我们数学中的坐标轴相反,所以上滑时y轴的值是负数
所以我们要得到每一块李<代码> 的高度,我们可以通过拿到他们的DOM <代码>
_calculateHeight () {
让lis=efs.rightItem美元;
让身高=0
this.rightHeight.push(高度)
Array.prototype.slice.call (lis)。forEach(李=比;{
身高+=li.clientHeight
this.rightHeight.push(高度)
}）
console.log (this.rightHeight)
}
