1.项目目录
2.逻辑层
group.js
// pages/group/group.js
Page({
/**
* 页面的初始数据
*/
data: {
goodslist: [
{
id: "001",
imgUrl: "http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
name: "女装T恤中长款大码摆裙春夏新款",
price: "65.00"
},
{
id: "002",
imgUrl: "http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
name: "火亮春秋季 男青年修身款圆领男士T恤",
price: "68.00"
},
{
id: "003",
imgUrl: "http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
name: "新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",
price: "86.00"
},
{
id: "004",
imgUrl: "http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
name: "男运动上衣春季上新品 上衣流行装青年",
price: "119.00"
},
{
id: "005",
imgUrl: "http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
name: "时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
price: "69.00"
},
{
id: "006",
imgUrl: "http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
name: "新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",
price: "86.00"
},
{
id: "007",
imgUrl: "http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
name: "时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
price: "119.00"
},
{
id: "008",
imgUrl: "http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
name: "男运动上衣春季上新品 上衣流行装青年",
price: "69.00"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 加入购物车
addcart: function (e) {
this.setData({
toastHidden: false
});
// 遍历列表 与 购物车列表
for (var i in this.data.goodslist) {
// 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项
if (this.data.goodslist[i].id == e.target.id) {
// 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量
this.data.goodslist[i].count = 1;
// 获取购物车的缓存数组（没有数据，则赋予一个空数组）
var arr = wx.getStorageSync('cart') || [];
// 如果购物车有数据
if (arr.length > 0) {
// 遍历购物车数组
for (var j in arr) {
// 判断购物车内的item的id，和事件传递过来的id，是否相等
if (arr[j].id == e.target.id) {
// 相等的话，给count+1（即再次添加入购物车，数量+1）
arr[j].count = arr[j].count + 1;
// 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）
try {
wx.setStorageSync('cart', arr)
} catch (e) {
console.log(e)
}
// 返回（在if内使用return，跳出循环节约运算，节约性能）
return;
}
}
// 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组
arr.push(this.data.goodslist[i]);
}
// 购物车没有数据，把item项push放入当前数据（第一次存放时）
else {
arr.push(this.data.goodslist[i]);
}
// 最后，把购物车数据，存放入缓存
try {
wx.setStorageSync('cart', arr)
// 返回（在if内使用return，跳出循环节约运算，节约性能）
return;
} catch (e) {
console.log(e)
}
}
}
}
})
3.页面布局
group.wxml
<!--pages/group/group.wxml-->
<!--主盒子-->
<view class="container">
<!--head-->
<view class="tit">
<view class="title_val">商品列表</view>
<view class="more">更多</view>
</view>
<!--list-->
<view class="goodslist">
<!--item-->
<block wx:for="{{goodslist}}" wx:key="id">
<view class="goods">
<!--左侧图片盒子-->
<view>
<image src="{{item.imgUrl}}" class="good-img" />
</view>
<!--右侧说明部分-->
<view class="good-cont">
<!--上--文字说明-->
<view class="goods-navigator">
<text class="good-name">{{item.name}}</text>
</view>
<!--下--价格部分-->
<view class="good-price">
<text>￥{{item.price}}</text>
<image id="{{item.id}}" class="cart" src="../../assets/images/shopping_cart.png" bindtap="addcart" />
</view>
</view>
</view>
</block>
</view>
</view>
4.样式
group.wxss
/* pages/group/group.wxss */
page{
height: 100%;
}
.container{
background: #f5f5f5;
}
.tit{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 30px;
position: relative;
}
.tit::before{
content:'';
background: #ffcc00;
5px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.title_val{
padding: 0 15px;
font-size: 14px;
color: #555;
line-height: 30px;
}
.more{
font-size: 12px;
line-height: 30px;
color: #999;
padding: 0 5px 0 0 ;
}
.goodslist{
background: #fff;
display: flex;
flex-direction: column;
}
.goods{
display: flex;
flex-direction: row;
border-bottom: 1px solid #ddd;
}
.good-img{
padding: 5px;
80px;
height: 80px;
}
.good-cont{
display: flex;
flex: 1;
flex-direction: column;
font-size: 14px;
}
.goods-navigator{
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
.good-name{
display: flex;
flex: 1;
flex-direction: column;
color: #555;
justify-content: center;
}
.good-price{
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
color:#e4393c;
font-weight: 600;
}
.cart{
40px;
height: 40px;
padding-right: 10px;
}
5.效果图
