小程序模板網(wǎng)

微信小程序之購物車

發(fā)布時(shí)間:2018-04-20 10:07 所屬欄目:小程序開發(fā)教程

登錄成功、付款成功,而且還擁有了自己的一輛車: 
購物車 
也發(fā)現(xiàn)了自己的不足之處: 
余額不足。

為大家介紹的就是購物車

這里演示從商品列表中添加到購物車

下面先做商品列表頁。如下圖:

布局分析:

首先一個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;


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23720.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢