当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序购物车功能开发教程

微信小程序购物车功能开发教程

2018-09-04 10:53 来源: 霸界科技

摘要:电商小程序一定少不了购物车功能,那么购物车功能要如何开发,如何布局呢。...

期权保本理财
  电商小程序一定少不了购物车功能,那么购物车功能要如何开发,如何布局呢。
 
微信小程序购物车功能开发教程
 
  购物车
 
  也发现了自己的不足之处:
 
  余额不足。
 
  为大家介绍的就是购物车
 
  这里演示从商品列表中添加到购物车
 
  下面先做商品列表页。如下图:
 
微信小程序购物车功能开发教程
 
  布局分析:
 
  首先一个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;
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088