微信小程序 购物车简单实例


Posted in Javascript onOctober 24, 2016

微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下。

摘要: 加减商品数量,汇总价格,全选与全不选

设计思路:

一、从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected

二、点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,而不用cid,方便遍历

三、全选操作 首次点击即为全部选中,再次点击为全不选,全选按钮本身也跟随toggle变换

四、点击结算按钮,将已选中的cid数组取出,以供通过网络提交到服务端,这里给个toast作为结果演示。

五、利用stepper作加减运算,同样依据index作为标识,点完写回num值。

六、布局,全选与结算按钮底部对齐,购物车商城自适应高度,类似于Android的weight。

步骤:

初始数据渲染

1.1 布局与样式表

上方是一个商品列表,下方是一个全选按钮与立即结算按钮

商品列表左部为商品缩略图,右上为商品标题,右下为商品价格与数量,其中商品数量使用WXStepper来实现加减操作

js:初始化一个数据源,这往往是从网络获取的,相关接口可参见:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

布局文件

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

样式表

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

微信小程序 购物车简单实例

1.2 集成WXStepper

1.2.1 复制组件内容

[2016-10-16]

将stepper.wxss的内容复制到cart.wxss中

将stepper.wxml的内容复制到cart.wxml中

与之前的单一组件不同的是:这里要定义数组minusStatuses来与每一个加减按钮相应。当然,合并入carts也是没问题的。

        minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']

原来的静态字符WXStepper换成以下的代码

<view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js代码bindMinus、bindPlus分别改造为如下:

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了,就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

效果如图:

微信小程序 购物车简单实例

[2016-10-17]

修正手工改动数量保存到数组

1.3 集成LXCheckboxGroup

复制布局文件代码到wxml,这里需要判断一下已选状态,一般购物车勾选状态是记录在网络的。

index值用于传值js,遍历之用。

      

<!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

复选框居中

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

绑定点击复选框事件,对选择状态做反选操作。

bindCheckbox: function(e) {
    /*绑定点击事件,将checkbox样式改变为选中与非选中*/
    //拿到下标值,以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

效果图:

微信小程序 购物车简单实例

1.4 加入全选与立即结算按钮

1.4.1 修改布局文件,实现上述按钮底部对齐,使用flex与固定高度来完成。

减少为3行,看是否还在最底;此外,还要保证悬浮在底部,不被列表项的滚动而滚动。

<view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

之前用<button>立即结算</button>来实现,发现无论如何都不能实现全选部件与结算按钮分散对齐,不响应如下样式

display: flex;
  flex-direction: row;
  justify-content: space-between;

样式表

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全选与全不选事件

实现bindSelectAll事件,改变全选状态

首先定义一个data值,以记录全选状态

selectedAllStatus: false

事件实现:

bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据,关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

微信小程序 购物车简单实例

1.4.3 立即结算显示目前所选的cid,以供提交到网络,商品数量应该是包括在cid中的,后端设计应该只关注cid与uid

布局文件也埋一下toast,js只要改变toast的显示与否即可。

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

为立即结算绑定事件bindCheckout,弹出cid弹窗

bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += ' ';
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 底部悬浮固定

1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx; 以及修改上边距为零,使得底部部件与分隔不重复出现,padding: 0 40rpx;

1.5.2 底部按钮 .carts-footer 加入 background: white;

1.5.3 .carts-footer 加入

position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

微信小程序 购物车简单实例

1.6 汇总

1.6.1 首先定义一个数据源,并在布局文件中埋坑

total: ''

<text>{{total}}</text>

1.6.2 通用汇总函数

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: '¥' + total
    });
  }

然后分别在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中调用this.sum()

如图:

微信小程序 购物车简单实例

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
You might like
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript类的写法
2016/09/17 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Vue的Options用法说明
2020/08/14 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python ETL工具 pyetl
2020/06/07 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
合作协议书范文
2014/08/20 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
聘用合同范本
2015/09/21 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
python flask开发的简单基金查询工具
2021/06/02 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android