用代码微信小程序实现商城小程序购物车页面并添加好样式
时间: 2024-03-05 10:49:08 浏览: 21
好的,下面是一个简单的微信小程序购物车页面的实现示例及其样式:
WXML代码:
```html
<view class="cart">
<view class="cart-header">
<view class="cart-title">购物车</view>
<view class="cart-clear">清空</view>
</view>
<view class="cart-items">
<view wx:for="{{cart}}" wx:key="id" class="cart-item">
<view class="cart-item-check">
<image class="cart-item-check-icon" src="{{item.checked ? '/images/checked.png' : '/images/unchecked.png'}}" bindtap="toggleChecked" data-index="{{index}}"></image>
</view>
<image class="cart-item-img" src="{{item.img}}"></image>
<view class="cart-item-info">
<view class="cart-item-title">{{item.title}}</view>
<view class="cart-item-price">{{item.price}}</view>
<view class="cart-item-quantity">
<image class="cart-item-quantity-minus" src="/images/minus.png" bindtap="minus" data-index="{{index}}"></image>
<view class="cart-item-quantity-num">{{item.quantity}}</view>
<image class="cart-item-quantity-plus" src="/images/plus.png" bindtap="plus" data-index="{{index}}"></image>
</view>
</view>
<view class="cart-item-delete">
<image class="cart-item-delete-icon" src="/images/delete.png" bindtap="remove" data-index="{{index}}"></image>
</view>
</view>
</view>
<view class="cart-footer">
<view class="cart-footer-check">
<image class="cart-footer-check-icon" src="{{checkedAll ? '/images/checked.png' : '/images/unchecked.png'}}" bindtap="toggleCheckedAll"></image>
<view class="cart-footer-check-text">全选</view>
</view>
<view class="cart-footer-total">
<view class="cart-footer-total-text">总计:</view>
<view class="cart-footer-total-amount">{{totalAmount}}</view>
</view>
<view class="cart-footer-checkout">结算</view>
</view>
</view>
```
样式代码:
```css
.cart {
padding: 20rpx;
font-size: 28rpx;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.cart-title {
font-weight: bold;
}
.cart-clear {
color: #999;
}
.cart-items {
margin-bottom: 20rpx;
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #eee;
}
.cart-item-check-icon {
width: 40rpx;
height: 40rpx;
}
.cart-item-img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.cart-item-info {
display: flex;
flex-direction: column;
flex: 1;
}
.cart-item-title {
font-weight: bold;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-item-price {
color: #999;
margin-bottom: 10rpx;
}
.cart-item-quantity {
display: flex;
align-items: center;
}
.cart-item-quantity-minus,
.cart-item-quantity-plus {
width: 32rpx;
height: 32rpx;
}
.cart-item-quantity-num {
margin: 0 10rpx;
}
.cart-item-delete-icon {
width: 40rpx;
height: 40rpx;
}
.cart-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-footer-check-icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.cart-footer-check-text {
margin-right: 10rpx;
}
.cart-footer-total {
display: flex;
align-items: center;
}
.cart-footer-total-text {
color: #999;
margin-right: 10rpx;
}
.cart-footer-total-amount {
font-weight: bold;
color: red;
margin-right: 10rpx;
}
.cart-footer-checkout {
padding: 10rpx 20rpx;
background-color: red;
color: #fff;
border-radius: 20rpx;
}
```
上面的代码实现了一个简单的购物车页面,包括购物车商品列表、单个商品的选择、数量加减、删除、全选、结算等功能。你可以根据自己的需求进行修改和扩展。