vue.js 移动端侧边栏导航和内容双向联动

描述:移动端侧边栏导航和右侧内容双向联动,用户点击左侧侧边栏导航,右侧内容能快速定位到内容区域,右侧内容在滚动时,左侧导航会高亮显示当前内容所对应的导航。

问题难点:右侧内容滚动时,左侧导航能定位到当前内容对应的导航。

解决方案:使用 js 提供的 intersectionObserver api 实现,此 api 可观察目标元素与其祖先元素或顶级文档视口交叉状态,通过交叉状态来实现双向联动。

具体实现如下:

1、侧边栏导航子组件 sideBar.vue






2、内容区域子组件 content.vue






3、父组件 index.vue






你可能感兴趣的:(vue.js,flutter,前端)