电商小程序一定少不了购物车功能,那么购物车功能要如何开发,如何布局呢。
购物车
也发现了自己的不足之处:
余额不足。
为大家介绍的就是购物车
这里演示从商品列表中添加到购物车
下面先做商品列表页。如下图:
布局分析:
首先一个list的主盒子,接着是item盒子,这是必须的。
然后把item分成左侧的图片部分,和右侧的说明部分(item盒子使用横向弹性盒)
右侧的说明部分又分上下2部分(右侧说明部分盒子使用纵向弹性盒)
下面价钱购物车部分(下面价钱购物车部分也使用横向弹性盒,中间使用justify-content: space-between;填充空白)
index.wxml:
[html] view plain copy <!--主盒子--> <view class="container"> <!--head--> <view class="tit"> <view class="title_val">商品列表</view> <view class="more">更多</view> </view> <!--list--> <view class="goodslist"> <!--item--> <block wx:for="{{goodslist}}"> <view class="goods"> <!--左侧图片盒子--> <view> <image src="{{item.imgUrl}}" class="good-img" /> </view> <!--右侧说明部分--> <view class="good-cont"> <!--上--文字说明--> <view class="goods-navigator"> <text class="good-name">{{item.name}}</text> </view> <!--下--价格部分--> <view class="good-price"> <text>¥{{item.price}}</text> <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" /> </view> </view> </view> </block> </view> </view>
index.wxss:
[css] view plain copy /**index.wxss**/ page{ height: 100%; } .container{ background: #f5f5f5; } .tit{ display: flex; flex-direction: row; justify-content: space-between; height: 30px; position: relative; } .tit::before{ content:''; background: #ffcc00; width:5px; height: 100%; position: absolute; left: 0; top: 0; } .title_val{ padding: 0 15px; font-size: 14px;
KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!
微信小程序 View 支持两种布局方式:Block 和 Flex,所有 View 默认都是 block,下面就来介绍下微信小程序的 Flex 布局...
做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的 小程序 。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异,因此传统的 Canv..