小程序模板网

微信小程序之购物车

登录成功、付款成功,而且还拥有了自己的一辆车: 
购物车 
也发现了自己的不足之处: 
余额不足。

为大家介绍的就是购物车

这里演示从商品列表中添加到购物车

下面先做商品列表页。如下图:

布局分析:

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23720.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询