底部可能出现购物车模块结合上面的图片

菜单页的结构的交互需求很容易就整理出来了顶部要求显示商家名称，有分享功能下方左侧右侧可分开滚动，滚动左侧不影响右侧，滚动右侧左侧随之联动高亮显示所在的菜单分类点击下方左侧导航菜单栏，高亮显示被点击的菜单分类，下方右侧对应分类详情模块顶部与右侧滚动区的顶部重合类似于 HTML 里的锚点功能滚动下方右侧菜品分类详情时，当该分类详情模块顶部接触到滚动区域的顶部，左侧对应的导航菜单栏高亮若左侧高亮的导航菜单不在可视区域当高亮的导航菜单顶部在左侧 scroll-view 滚动区上方被遮住了，则将该高亮导航菜单滚动至将高亮导航栏的顶部与左侧可滚动区域顶部重合高亮菜单为滚动区的第一个分类当高亮的导航菜单在左侧 scroll-view 滚动区可视区下方，将高亮导航菜单滚动到屏幕中央区域顶部下方可能会出现黄条提示文案模块底部上方可能会出现购物车模块顶部黄条提示文案模块吸顶，底部购物车模块吸底需要适配各种不同机型关键技术罗列这里需要指出产品在设计成稿之前，我们已经对小程序支持的功能做了细致的调研，确保可以通过技术手段实现产品需求，才确定 UI 以及交互设计从产品兼容性角度出发，我们考虑使用微信小程序的 rpx 作为 UI 设计的标准尺寸该尺寸和 rem 非常类似，不同点在于其对基准尺寸的设

定rem 使用文档根元素设定的尺寸作为基准尺寸，而 rpx 使用手机屏幕宽度为基准，决定  rpx 对应的宽度，该动态尺寸对设备的兼容性更加友好此外，微信还自带 scroll-view UI组件，并提供一系列组件状态操作接口当 scroll-view 组件滚动时，会触发 scroll 事件所返回的 event 对象各项长度属性，均使用 px 作单位开始开发菜单的页面结构如下我们在开发中使用工具对文件实时编译为方便代码维护以及日常的开发习惯，我们对 Less 语法进行兼容，引入了 Promise 组件购物车模块 view viewpage这里着重考虑两个 scroll-view 结构设计，左右的布局结构可以使用 CSS 样式属性float，或者是 CSS  的 flex另外，黄条提示和购物车模块