布局分析：

首先一個list的主盒子，接著是item盒子，這是必須的。 
然后把item分成左側(cè)的圖片部分，和右側(cè)的說明部分（item盒子使用橫向彈性盒） 
右側(cè)的說明部分又分上下2部分（右側(cè)說明部分盒子使用縱向彈性盒） 
下面價(jià)錢購物車部分（下面價(jià)錢購物車部分也使用橫向彈性盒，中間使用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. <!--左側(cè)圖片盒子-->
16. <view>
17. <image src="{{item.imgUrl}}" class="good-img" />
18. </view>
19. <!--右側(cè)說明部分-->
20. <view class="good-cont">
21. <!--上--文字說明-->
22. <view class="goods-navigator">
23. <text class="good-name">{{item.name}}</text>
24. </view>
25. <!--下--價(jià)格部分-->
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;