微信小程序点餐功能中，如何设置左侧滑动菜单实现便捷点选？

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

目录+前言+一、初识scroll-view+二、左右导航+三、右侧滑动+前言+最近在帮朋友做一款微信的点餐小程序，之前一直没有接触过小程序的开发。一边看文档一边实践尝试。

目录

• 前言
• 一、初识scroll-view
• 二、左侧导航
• 三、右侧滑动

前言

最近在帮亲戚做一款微信的点餐小程序，以前从没有接触过小程序的我只能现做现卖。一边看文档一边实践尝试，在进行到点菜模块左侧滑动菜单时遇到了小小的阻碍。索性在查找一些资料和教程后主要功能实现了出来。特此记录下，也希望能帮助到需要做同样功能的同学。

效果图：

一、初识scroll-view

想要实现上述功能我们必须要借助微信为我们提供的scroll-view组件，没有了解过的同学需要先去简单阅读下API。从图中我们可以看出整个布局主要是由左右两个滚动界面构成。但是它们彼此之间又有联系，在点击左侧菜单类型跟滑动右侧菜品的时候另外一个滚动窗口必须做出响应。滚动条实现原理其实就是我们HTML中的锚点，右侧整个菜单是一个完整界面它会将其按唯一id标识拆分成不同模块。比如我们整个界面的高度是2000rpx,其中人气top10占400rpx。那么height：0-400就对应人气top10。而无肉不欢对应模块高度为300rpx那么，400-700区域就是无肉不欢。以此类推，下面代码中我们使用id="{{ ‘right’ + item.id}}" 为每个分类模块做了唯一标识。