如何将mpvue的左右联动改为长尾词导航，实现精准内容匹配？

本文共计959个文字，预计阅读时间需要4分钟。

本文以实例展示了如何使用mpvue实现左右导航与内容联动的整体代码，并提供效果图：

（1）左侧导航联动右侧内容实现：

效果：点击左侧导航，右侧内容滚动到对应位置。

实现：

javascript// mpvue页面组件 {{ item.name }} {{ item.content }}

.menu { width: 200px; position: fixed; top: 0; bottom: 0; overflow-y: auto;}.content { margin-left: 200px; padding-top: 50px; overflow-y: auto; height: 100vh;}

效果图：


本文实例为大家分享了mpvue左侧导航与右侧内容联动的具体代码，供大家参考，具体内容如下

效果图如下：

（1）左侧导航联动右侧内容

实现：点击左侧导航，右侧内容滑到对应的位置，并且导航上有current当前样式。

mpvue用的还是微信小程序提供的组件scroll-view，它里面有一个属性scroll-into-view，值为某子元素的id，滚动到该元素。