今天是愉快开发商城项目的第四天了,相信如果大家跟着我能把前两天的前端内容敲完,相信你是有比较大的收货的。
今天的内容是完成购物车的前端代码。
购物车的设计还是比较常规的UI,展示商品的信息,提供选中按钮,提供加减按钮,提供结算按钮,提供一键清空按钮,并在界面底部实时展示目前的购物车已选中的商品的总价。
首先是商品的信息卡片,依然是以flex为核心的布局方式。
<view class="body">
<view class="product">
<checkbox-group bindchange="checked" class="left">
<checkbox ></checkbox>
</checkbox-group>
<image src="../../images/apple.png"></image>
<view class="middle">
<text>苹果</text>
<text>进口红富士,又大又甜</text>
<text>¥6</text>
</view>
<view class="right">
<text>-</text>
<text>1</text>
<text>+</text>
</view>
</view>
</view>
page {
background-color: #f3f3f3;
height: 100%;
}
.product {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
position: relative;
margin-bottom: 25rpx;
background-color: #fff;
padding-bottom: 20rpx;
}
.middle {
display: flex;
flex-direction: column;
margin-left: 40rpx;
margin-top: 20rpx;
font-size: 28rpx;
}
.middle :nth-child(1){
font-weight: bold;
margin-bottom: 10rpx;
}
.middle :nth-last-child(2){
color: gray;
width: 220rpx;
font-size: 24rpx;
margin-bottom: 10rpx;
}
.middle :nth-child(3){
color: red;
}
.product > .left {
margin-left: 50rpx;
}
.product > image {
width: 100rpx;
height: 100rpx;
padding-left: 40rpx;
}
.product > .right {
display: flex;
flex-direction: row;
border:1rpx solid black;
font-weight: bold;
width: 180rpx;
height:60rpx;
line-height: 60rpx;
text-align: center;
position: absolute;
bottom: 20rpx;
right: 10rpx;
}
.product > .right :nth-child(1){
height: 60rpx ;
width: 60rpx;
border-right:1rpx solid black
}
.product > .right :nth-last-child(2){
height: 60rpx;
width: 60rpx;
border-right: 1rpx solid black;
}
.product > .right :nth-child(3) {
height: 60rpx;
width: 60rpx;
}
效果:
基本是这样的样式,我们现在只是写前端内容,所以这个选中和数量加减没效果的。
而且我只写了一组数据,如果大家想多加几组的话,参照前两天的写法,利用wx:for渲染。
接下来写全部删除按钮和底部的内容。
<view class="button">清空购物车</view>
<view class="bottom">
<view class="bottom_left">
<text>¥999</text>
</view>
<view class="bottom_right">去结算</view>
</view>
.button {
width: 100rpx;
padding: 10rpx;
font-size: 20rpx;
margin: 0 auto;
border: 1rpx solid gray;
margin-top: 30rpx;
}
.bottom {
display: flex;
flex-direction: row;
width: 100%;
position: fixed;
bottom: 0;
height: 100rpx;
background-color: white;
}
.bottom_left {
width: 70%;
line-height: 100rpx;
}
.bottom_left > text {
text-align: center;
margin-left: 50rpx;
color: red;
font-size: 40rpx;
}
.bottom_right {
width: 30%;
text-align: center;
line-height: 100rpx;
color: white;
background-color: green;
}
最终效果:
基本的框架是这样的,大家可以自己多做几组数据,然后按照自己的设计完成布局,每个人都有自己的布局方式,我只是给大家提供一个完成代码的思路。
然后再强调一下,目前我们都是在完成页面的前端内容,不涉及任何后端数据交互,所以我们写的都是死数据,并且尽量不写JS的内容,只写样式。
点赞、关注、收藏都是对作者莫大的鼓励,谢谢!
有任何问题可以联系QQ:505417246
零基础入门微信小程序云开发QQ群:1073011570
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料