微信小程序购物车代码
时间: 2023-07-13 22:07:21 浏览: 111
微信小程序购物车代码.zip
5星 · 资源好评率100%
下面是一个简单的微信小程序购物车代码示例:
1. 在页面的 js 文件中定义购物车数组和商品列表数组:
```
Page({
data: {
cartList: [], // 购物车数组
goodsList: [ // 商品列表数组
{
id: 1,
name: '商品1',
price: 10
},
{
id: 2,
name: '商品2',
price: 20
},
{
id: 3,
name: '商品3',
price: 30
}
]
},
// 其他代码
})
```
2. 在页面的 wxml 文件中展示商品列表和购物车列表:
```
<!-- 商品列表 -->
<view class="goods-list">
<view wx:for="{{goodsList}}" wx:key="id">
<view>{{item.name}}</view>
<view>¥{{item.price}}</view>
<button bindtap="addToCart" data-id="{{item.id}}">加入购物车</button>
</view>
</view>
<!-- 购物车列表 -->
<view class="cart-list">
<view wx:for="{{cartList}}" wx:key="id">
<view>{{item.name}}</view>
<view>¥{{item.price}}</view>
<button bindtap="removeFromCart" data-id="{{item.id}}">删除</button>
</view>
</view>
```
3. 在页面的 js 文件中实现加入购物车和删除功能:
```
Page({
data: {
cartList: [], // 购物车数组
goodsList: [ // 商品列表数组
// 商品列表数据
]
},
// 添加到购物车函数
addToCart: function(event) {
let goodsId = event.currentTarget.dataset.id;
let goods = this.data.goodsList.find(item => item.id === goodsId);
if (goods) {
let cartGoods = this.data.cartList.find(item => item.id === goodsId);
if (cartGoods) {
// 如果购物车中已经存在该商品,则数量加1
cartGoods.count += 1;
} else {
// 如果购物车中不存在该商品,则添加到购物车数组中
this.data.cartList.push({
id: goods.id,
name: goods.name,
price: goods.price,
count: 1
});
}
this.setData({
cartList: this.data.cartList
});
}
},
// 从购物车中删除函数
removeFromCart: function(event) {
let goodsId = event.currentTarget.dataset.id;
let index = this.data.cartList.findIndex(item => item.id === goodsId);
if (index !== -1) {
this.data.cartList.splice(index, 1);
this.setData({
cartList: this.data.cartList
});
}
}
})
```
以上代码仅为示例,实际开发中可能需要根据具体需求进行修改和完善。
阅读全文