微信小程序点菜页面代码
时间: 2023-08-23 11:05:04 浏览: 44
由于微信小程序点菜页面的代码可能因具体需求而异,因此我将为您提供一个简单的示例代码,您可以根据自己的需求进行修改和调整:
```
<view class="container">
<view class="title">欢迎来到XXX餐厅</view>
<view class="menu">
<view class="menu-item" wx:for="{{menu}}" wx:key="index">
<image src="{{item.pic}}" class="pic" mode="aspectFit"></image>
<view class="name">{{item.name}}</view>
<view class="price">¥{{item.price}}</view>
<view class="add" bindtap="addCart" data-index="{{index}}">加入购物车</view>
</view>
</view>
<view class="cart">
<view class="cart-title">购物车</view>
<view class="cart-list">
<view class="cart-item" wx:for="{{cart}}" wx:key="index">
<view class="cart-info">
<view class="cart-name">{{item.name}}</view>
<view class="cart-price">¥{{item.price}}</view>
</view>
<view class="cart-count">
<view class="cart-minus" bindtap="minusCart" data-index="{{index}}">-</view>
<view class="cart-num">{{item.num}}</view>
<view class="cart-plus" bindtap="plusCart" data-index="{{index}}">+</view>
</view>
</view>
</view>
<view class="cart-total">总计:¥{{total}}</view>
</view>
</view>
```
在这个示例代码中,我们展示了一个包含菜单列表和购物车列表的页面。菜单列表通过 `wx:for` 循环渲染,用户可以通过点击“加入购物车”按钮将菜品添加到购物车中。购物车列表同样使用 `wx:for` 循环渲染,用户可以通过点击“+”和“-”按钮调整购物车中菜品的数量。购物车中菜品数量和总价会实时更新。请注意,这只是一个示例代码,您需要根据自己的实际需求进行修改和调整。