微信小程序实现从一个页面添加功能并渲染到购物车页面功能 代码
时间: 2023-12-19 18:05:53 浏览: 113
以下是一个简单的示例代码,实现从一个页面添加商品到购物车页面并渲染:
1. 添加功能的页面代码:
```html
<!-- 添加功能的页面 -->
<view>
<text>商品名称:{{product.name}}</text>
<text>商品价格:{{product.price}}</text>
<button bindtap="addToCart">添加到购物车</button>
</view>
```
```javascript
// 添加功能的页面的js代码
Page({
data: {
product: { // 商品信息
name: '商品名称',
price: 99.9
}
},
addToCart: function() { // 添加到购物车事件处理函数
// 从本地缓存中获取购物车列表
let cartList = wx.getStorageSync('cartList') || [];
// 将商品信息添加到购物车列表中
cartList.push(this.data.product);
// 将购物车列表保存到本地缓存中
wx.setStorageSync('cartList', cartList);
// 提示添加成功
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 2000
});
}
})
```
2. 购物车页面代码:
```html
<!-- 购物车页面 -->
<view>
<view wx:for="{{cartList}}" wx:key="{{index}}">
<text>商品名称:{{item.name}}</text>
<text>商品价格:{{item.price}}</text>
<button bindtap="removeFromCart" data-index="{{index}}">删除</button>
</view>
</view>
```
```javascript
// 购物车页面的js代码
Page({
data: {
cartList: [] // 购物车列表
},
onShow: function() { // 页面显示时,加载购物车列表
let cartList = wx.getStorageSync('cartList') || [];
this.setData({
cartList: cartList
});
},
removeFromCart: function(e) { // 从购物车中删除商品事件处理函数
let index = e.currentTarget.dataset.index;
let cartList = this.data.cartList;
cartList.splice(index, 1); // 删除对应商品
wx.setStorageSync('cartList', cartList); // 更新本地缓存
this.setData({
cartList: cartList
});
}
})
```
以上代码仅供参考,具体实现可根据实际需求进行调整。
阅读全文