微信小程序之购物车

布局分析：

首先一个list的主盒子，接着是item盒子，这是必须的。 
然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒） 
右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒） 
下面价钱购物车部分（下面价钱购物车部分也使用横向弹性盒，中间使用justify-content: space-between;填充空白）

index.wxml：

1.  
2. [html] view plain copy
3. <!--主盒子-->
4. <view class="container">
5. <!--head-->
6. <view class="tit">
7. <view class="title_val">商品列表</view>
8. <view class="more">更多</view>
9. </view>
10. <!--list-->
11. <view class="goodslist">
12. <!--item-->
13. <block wx:for="{{goodslist}}">
14. <view class="goods">
15. <!--左侧图片盒子-->
16. <view>
17. <image src="{{item.imgUrl}}" class="good-img" />
18. </view>
19. <!--右侧说明部分-->
20. <view class="good-cont">
21. <!--上--文字说明-->
22. <view class="goods-navigator">
23. <text class="good-name">{{item.name}}</text>
24. </view>
25. <!--下--价格部分-->
26. <view class="good-price">
27. <text>￥{{item.price}}</text>
28. <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
29. </view>
30. </view>
31. </view>
32. </block>
33. </view>
34. </view>

index.wxss：

1. [css] view plain copy
2. /**index.wxss**/
3. page{
4. height: 100%;
5. }
6. .container{
7. background: #f5f5f5;
8. }
9.  
10. .tit{
11. display: flex;
12. flex-direction: row;
13. justify-content: space-between;
14. height: 30px;
15. position: relative;
16. }
17. .tit::before{
18. content:'';
19. background: #ffcc00;
20. width:5px;
21. height: 100%;
22. position: absolute;
23. left: 0;
24. top: 0;
25. }
26.  
27. .title_val{
28. padding: 0 15px;
29. font-size: 14px;