标签：菜单 微信 饮食 程序 点击 按钮 菜品 添加 view
该篇是转接我的文章简单饮食推荐（一）中功能实现中的订餐模块。
目录
1、要实现的功能
- 能够显示菜单
- 可以切换不同的食物种类
- 可以将菜单中的菜品或者食物添加至购物车
- 在购物车中可以对已经选择的食物进行增加或减少
- 可以对购物车中的食物进行结账
- 结完账后可以扫码支付
2、界面的布局
该模块的界面采取的是左右联动的菜单列表，该功能的实现可以直接通过scroll-view来设置。但我没有直接用这个组件。我使用的组件是view组件，只不过是在它的css属性中通过将overflow设置为scroll来实现。
3、设计思路
1、整个页面分成左右两个view，横向布局；左侧view用子菜单view一个个填充，纵向布局，右侧的也是纵向布局。
2、在左边菜单中，子菜单内容存入数组，点击子菜单view，用<view class="{{tabIndex == index ? ‘menu active’ : ‘menu’}}"来记录当前选择的菜单，其中tabIndex是回传的数组索引index。
3、右菜单中，要想实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过判断js中存着的数组的id是否等于当前的tabIndex来筛选出id等于当前 tabIndex的数据。
4、图片资源的存储问题：可以利用图床来存放，然后把每一个图片的url记录下来，然后在js中存储到对应的菜品数组中。
5、对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
6、点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。
7、在购物车界面可以点击“结账”按钮进行结账，点击后会调出一个确认界面，确认之后就会进入支付界面，可以扫码支付。
4、实现过程
1、设置左右联动的菜单列表，关键代码如下：
其中要对view进行属性的配置，实现滚动的效果，关键就是要对overflow进行设置，overflow 属性规定当内容溢出元素框时发生的事情，这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，都会提供一种滚动机制。所以可以设置“overflow: scroll;”。
Overflow分别设置在aside和item-content中，对两个左右联动的菜单列表的最外层view的设置如下：
2、左侧菜单可以view的for循环来实现，循环遍历js中的menus数组，当然menus数组要传到视图层。Menus数组定义如下：
点击的每一个菜单框绑定的是js中的tabMenu事件，
绑定的tabMenu函数为：
当点击某个选项时如何判断点击的是哪个菜单？
查阅资料发现可以在标签里设置data-index，绑定一个点击事件，传参index，通过event.target.dataset.index来取；可在js中访问 event.target.dataset对象，而event.target.dataset.index里面的index就是我们在view标签上添加的" data-index “属性；然后用了三元表达式class=”{{tabIndex === index ? ‘menu active’ : ‘menu’}}"来动态赋值给class，这样就实现了动态控制class。
用这个函数实现了获取当前点击的是哪一个menu，也就是在js中定义的menus数组中其中选中的那一个数组的下标。
在tabMenu事件函数中添加console.log(index)来进行验证是否可以获取到当前点击菜单的事件：
从上到下依次点击按钮，可以看到在调试器中输出如下内容：
可以看出输出内容准确，上述功能以实现。
3.要先实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过“wx:if="{{tabIndex==item.id}}”来判断js中菜品数组中的id是否等于当前的tabIndex的值来筛选出id等于当前 tabIndex的菜品数据。也就是在items数组（存放菜品信息）中，同一种类别的食物共用一个id，如下定义：
4.图片资源的处理
为避免小程序代码文件整体过大，应该避免在文件夹中存储大量的图片资源，所以可以将所用到的图片资源上传到图床来存储。这里我选择的是 路过图床 来存储所用到的图片资源。
上传完后如下所示：
将每个图片的url保存到js中定义items数组中：
5.对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
“添加”按钮绑定的事件是addOrder，在该函数中要实现的有：
购物单列表存储数据、改变添加按钮的状态、将已经确定的菜单添加到购物单列表、判断底部提交菜单显示隐藏、总价格求和、设置显示对应的总数和全部价钱、将选中的商品存储在本地。
购物单列表存储数据实现：购物单列表存储在subOrders这个数组中，如下所示：
改变添加按钮的状态，这里通过一个三元表达式来实现就可以，如下：
将已经确定的菜单添加到购物单列表，直接用push函数来添加到subOrders数组中，如下所示：
判断底部提交菜单显示隐藏，判断subOrders数组是否为空，若subOrders为空，底部提交菜单显示标志bottomFlag为false，否则底部提交菜单显示标志bottomFlag置为true。
总价格求和,这里只需简单的加法就可以，如下所示：
设置显示对应的总数和全部价钱，只需将orderCount这个集合进行setData就可以了，代码如下：
将选中的商品存储在本地，这里用的是wx.setStorage(Object object)函数，查找开发者文档得知该函数的用法如下：
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
6. 点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。
这个按钮绑定的事件函数是js中的card函数。card函数如下：
查阅开发文档，跳转函数可以用wx.redirectTo(Object object)，该函数的功能是：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。点击之后会跳转到’…/order/order’界面。
跳转到该界面后，显示选中的菜品的代码如下：
这里和前面的列表显示异曲同工，用for遍历数组即可。
实现对购物车菜品量的加减界面的view代码：
其中加减按钮绑定的事件函数的代码如下：
点击加减按钮，测试框输出如下：
这里加减的数据对象是之前设定的orderCount集合中的num和money的值。
“结账”按钮绑定的事件是pay函数，pay函数代码如下：
1. pay: function () {
2. let that = this;
3. let str = '选中' + that.data.orderCount.num + '件商品，共' + that.data.orderCount.money + '元，是否要支付？'
4. wx.showModal({
5. title: '提示',
6. content: str,
7. success: function (res) {
8. // 至少选中一个商品才能支付
9. if (that.data.orderCount.num !== 0) {
10. if (res.confirm) {
11. // 打开扫码功能
12. wx.scanCode({
13. onlyFromCamera: true,
14. success: (res) => {
15. wx.redirectTo({
16. url: '../pay/pay'
17. });
18. }
19. });
20. } else if (res.cancel) {
21. console.log('用户点击取消')
22. }
23. } else {
24. wx.showToast({
25. title: '您未选中任何商品',
26. icon: 'none',
27. duration: 2000
28. })
29. }
30. }
31. })
用if (that.data.orderCount.num !== 0)来判断当前orderCount中是否有数据，也就是是否有待结账的菜品，若有，就会弹出一个确认框，点击确认之后，就会调取扫码功能，扫码功能代码如下：
在这个函数中，调用之后会转到支付界面
标签：菜单,微信,饮食,程序,点击,按钮,菜品,添加,view 来源： https://blog.csdn.net/weixin_43624626/article/details/115559614
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。