Vue实现左右菜单联动实现代码
|
本文介绍了Vue实现左右菜单联动实现代码吗，分享给大家，也给自己留个笔记，具体如下： 源码传送门： 之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用
这个组件分为两个部分，1、左菜单；2、右菜单。 左菜单的 右菜单的 这里是为了做 当然因为这是个子组件，我们将通过父组件传递
在这个业务场景中，我们的实现方式是根据右边菜单滚动的高度来计算左边菜单的位置，当然左边菜单也可以通过点击来确定右边菜单需要滚动多高的距离，那么我们如何获得该容器滚动的距离呢？ 之前一直在使用，通过阅读文档，我们知道它有有
{
me.$emit('scroll',pos)
})
}
所以我们在右边菜单的 method 我们将监听得到的pos打出来看看
我们可以看到控制台打出了当前滚动的pos信息，因为在移动端开发时，坐标轴和我们数学中的坐标轴相反，所以上滑时y轴的值是负数
所以我们要得到每一块 {
height += li.clientHeight
this.rightHeight.push(height)
})
console.log(this.rightHeight)
}
我们在
{
height += li.clientHeight
this.rightHeight.push(height)
})
console.log(this.rightHeight)
}
当用户在滚动时，我们需要计算当前滚动距离实在那个区间内，并拿到他的
{
return scrollY >= rightHeight[index] && scrollY < rightHeight[index + 1]
})
return index > 0 ? index : 0
}
}
所以当前应该是左边菜单 这里加上 到这里我们就基本上完成了这些需求了 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
