微信小程序> 微信小程序之购物车

微信小程序之购物车

浏览量:894 时间: 来源:宏-

为大家介绍的就是购物车

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

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

小程序



布局分析:

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

小程序


index.wxml

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎