微信小程序如何实现左右页面联动功能？

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

本例展示了一家公司分享了微信小程序实现左右联动的整体代码，供大家参考。近期，学校课程项目使用微信小程序搭建，选择了点餐项目。在对主页进行实作时，采用了以下内容。

本文实例为大家分享了微信小程序实现左右联动的具体代码，供大家参考，具体内容如下

最近学校课程系统分析项目使用了微信小程序来进行搭建，在选择了点餐项目后，对主页进行实现时，想要实现像麦当劳点餐一样，左边表示类别，右边表示菜品，通过点击左边的类，右边会滚动到对应的类，滚动右边的菜品，左边当前滚动到的菜品类别也回高亮显示。那么首先先展示一下成果吧！

虽然这个功能很小，但我觉得一旦搞清楚scroll-view的原理就很有用处。

首先查看微信小程序的官方文档：scroll-view

下面来按照我自己的理解介绍我所使用到的属性：

• scroll-y: 设置滚动的方向，x就是横着，y就是竖着，属性的类型是boolean值
• scroll-top:就是说scroll-top的值是距离顶部的值，你将它写在哪个scroll-view中，scroll-view就距离顶部多远，不过我们可以设置变量值，在js中按照条件更改它，这也是实现左右联动的关键步骤。