前言
如果您需要纯 “食堂扫码点餐、外卖点餐” 带购物车商品计算等功能,请访问 这篇文章。
在微信小程序开发中,详解实现左边菜单导航,右边是对应的列表内容,当点击左侧菜单时,右侧会自动跳转到对应的位置,反之当右侧内容列表滑动时 “经过锚点/碰到大标题” 后左侧的菜单也跟着高亮显示和切换分类效果,支持自由修改各种样式、接口数据懒加载、自动适配各种屏幕尺寸,类似美团外卖点餐左右联动界面、餐厅扫码点餐页面、商店在线选购商品等场景。
小程序 vue2 | vue3 版本语法都能使用,跟着教程复制代码运行稍加改造即可。
如下图真机所示,安卓和苹果手机运行丝滑流畅,兼容适配各种手机屏幕尺寸,通用性极强。
示例代码
具体实现代码如下,请直接复制运行测试即可。