微信小程序实战篇之购物车的实现代码示例


Posted in Javascript onNovember 30, 2017

哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家如何实现购物车了,先上效果图

微信小程序实战篇之购物车的实现代码示例

购物车实现

cart.wxml

<import src="/template/quantity/index.wxml" />
<scroll-view class="scroll" scroll-y="true">
 <view class="separate"></view>
 <view wx:for="{{carts}}">
  <view class="cart_container">
   <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />

   <image class="item-image" src="{{item.pic}}"></image>

   <view class="column">
    <text class="title">{{item.name}}</text>
    <view class="row">
     <text class="sku-price">¥</text>
     <text class="sku-price">{{item.price}}</text>
     <view class="sku">
      <template is="quantity" data="{{ ...item.count, componentId: index }}" />
     </view>
    </view>

   </view>
  </view>
  <view class="separate"></view>
 </view>
</scroll-view>
<view class="bottom_total">
 <view class="bottom_line"></view>

 <view class="row">
  <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />
  <text class="small_text">全选</text>
  <text>合计:¥ </text>
  <text class="price">{{totalMoney}}</text>
  <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
 </view>
</view>

布局不是很复杂,一个循环列表,循环出购物车商品,外加一个结算的底部控件,还需要提醒的是,循环列表外面要加一层scroll-view,这样当数据很多是时候,可以滚动,不熟悉scroll-view的,请自行翻看前面几篇文章,里面有讲解

cat.wxss

/* pages/cart/cart.wxss */
.cart_container {
 display: flex;
 flex-direction: row;
}
.scroll {
 margin-bottom: 120rpx;
}
.column {
 display: flex;
 flex-direction: column;
}
.row {
 display: flex;
 flex-direction: row;
 align-items: center;
}
.sku {
 margin-top: 60rpx;
 margin-left: 100rpx;
}
.sku-price {
 color: red;
 position: relative;
 margin-top: 70rpx;
}
.price {
 color: red;
 position: relative;
}
.title {
 font-size: 38rpx;
 margin-top: 40rpx;
}
.small_text {
 font-size: 28rpx;
 margin-right: 40rpx;
 margin-left: 10rpx;
}
.item-select {
 width: 40rpx;
 height: 40rpx;
 margin-top: 90rpx;
 margin-left: 20rpx;
}
.item-allselect {
 width: 40rpx;
 height: 40rpx;
 margin-left: 20rpx;
}
.item-image {
 width: 180rpx;
 height: 180rpx;
 margin: 20rpx;
}
.bottom_line {
 width: 100%;
 height: 2rpx;
 background: lightgray;
}
.bottom_total {
 position: fixed;
 display: flex;
 flex-direction: column;
 bottom: 0;
 width: 100%;
 height: 120rpx;
 line-height: 120rpx;
 background: white;
}
.button-red {
 background-color: #f44336; /* 红色 */
}
button {
 position: fixed;
 right: 0;
 color: white;
 text-align: center;
 display: inline-block;
 font-size: 30rpx;
 border-radius: 0rpx;
 width: 30%;
 height: 120rpx;
 line-height: 120rpx;
}

wxss样式没什么可说的,了解其属性,调用class就好,重点说一下cart.js,全篇的逻辑都在这里面

cart.js

// pages/cart/cart.js
var Temp = require('../../template/contract.js');
Page(Object.assign({}, Temp.Quantity, {
 data: {
  isAllSelect:false,
  totalMoney:0,
  // 商品详情介绍
  carts: [
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
    name:"日本资生堂洗颜",
    price:200,
    isSelect:false,
    // 数据设定
    count: {
     quantity: 2,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
    name: "倩碧焕妍活力精华露",
    price: 340,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
    name: "特效润肤露",
    price: 390,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 3,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
    name: "倩碧水嫩保湿精华面霜",
    price: 490,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
    name: "兰蔻清莹柔肤爽肤水",
    price: 289,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 10,
     min: 1,
     max: 20
    },
   },
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    name: "LANCOME兰蔻小黑瓶精华",
    price: 230,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
  ],
 },
 
 //勾选事件处理函数 
 switchSelect: function (e) {
  // 获取item项的id,和数组的下标值 
  var Allprice = 0,i=0;
  let id = e.target.dataset.id,
 
  index = parseInt(e.target.dataset.index);
  this.data.carts[index].isSelect = !this.data.carts[index].isSelect;
  //价钱统计
  if (this.data.carts[index].isSelect) {
   this.data.totalMoney = this.data.totalMoney + this.data.carts[index].price;
  }
  else {
   this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price;
  }
  //是否全选判断
  for (i = 0; i < this.data.carts.length; i++) {
   Allprice = Allprice + this.data.carts[i].price;
  }
  if (Allprice == this.data.totalMoney)
  {
   this.data.isAllSelect=true;
  }
  else 
  {
   this.data.isAllSelect = false;
  }
  this.setData({
   carts: this.data.carts,
   totalMoney: this.data.totalMoney,
   isAllSelect: this.data.isAllSelect,
  })
 },
 //全选
 allSelect: function (e) {
  //处理全选逻辑
  let i = 0;
  if (!this.data.isAllSelect)
  {
   for (i = 0; i < this.data.carts.length; i++) {
    this.data.carts[i].isSelect = true;
    this.data.totalMoney = this.data.totalMoney + this.data.carts[i].price;
   }
  }
  else
  {
   for (i = 0; i < this.data.carts.length; i++) {
    this.data.carts[i].isSelect = false;
   }
   this.data.totalMoney=0;
  }
  this.setData({
   carts: this.data.carts,
   isAllSelect: !this.data.isAllSelect,
   totalMoney: this.data.totalMoney,
  })
 },
 // 去结算
 toBuy() {
  wx.showToast({
   title: '去结算',
   icon: 'success',
   duration: 3000
  });
  this.setData({
   showDialog: !this.data.showDialog
  });
 },
 //数量变化处理
 handleQuantityChange(e) {
  var componentId = e.componentId;
  var quantity = e.quantity;
  this.data.carts[componentId].count.quantity = quantity;
  this.setData({
   carts: this.data.carts,
  });
 }
}));

介绍一下用到的参数

  1. isAllSelect:是否全选
  2. totalMoney:总金额
  3. carts :购物车商品数据

switchSelect 勾选按钮需要做的逻辑处理

  1. 判断是否达到全部勾选,如果全部勾选,底部的全选按钮要点亮,判断依据是,价钱是否等于总价,当然这只是一种判断方式,读者也可以通过勾选的数量判断,
  2. 对勾选或取消的按钮,进行总价的加减法计算
  3. this.setData,更新数据,这个是重点,每次处理完数据,都要记得更新数据

allSelect 全选按钮的逻辑处理

  1. 全选就把每个item勾选图标点亮,然后统计总价钱,不全选就置为灰色,总价钱为0
  2. this.setData更新数据

微信小程序数据处理

一、修改数据方式

data:{
 name:'我是初始化的name'
}

1、this.data.name

this.data.name='我是代码君data'

2、this.setData

this.setData({
   name:'我是代码君setData'
  })

这两种方式都可以改变数据,this.setData的好处是可以有刷新的效果,即实时更新数据

二、修改对象数组

data:{
person:{
 name:'代码君',
 city:'厦门'
}
}

修改全部对象

this.setData({
   person:{
    name:'新代码君',
    city:'湖南'
   }
  })

修改部分数据

this.setData({
   'person.name': '代码君只修改名字'
  })
//多个数组用这个
this.setData({
   'person[0].name': '代码君只修改名字'
  })

三、添加删除数据

1、添加数据concat

//假设这一段是我们要新增的数组
var newarray = [{
    name:'增加的数据--'+new Date().getTime() ,
}];
//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);
//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

2、删除数据splice()删除数据,然后返回被删除的数据

//删除
 remove:function (e){
  var dataset = e.target.dataset;
  var Index = dataset.index;
  //通过index识别要删除第几条数据,第二个数据为要删除的项目数量,通常为1
  this.data.list.splice(Index,1);
  //渲染数据
  this.setData({
    list:this.data.list
  });
 }

3、清空数据

//清空
 clear:function (){
  //其实就是让数组变成一个空数组即可
   this.setData({
     list:{}
   });
 }

总结

今天主要讲解js是如何处理数据逻辑的,也讲解了数据的增删改查,这是必备的知识项,回去要多多练习。好了今天就讲到这,祝大家周末愉快~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
微信小程序支付及退款流程详解
Nov 30 #Javascript
windows下更新npm和node的方法
Nov 30 #Javascript
实例教学如何写vue插件
Nov 30 #Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 #Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 #Javascript
vue的状态管理模式vuex
Nov 30 #Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
You might like
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JS实现多物体运动的方法详解
2018/01/23 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
python之文件读取一行一行的方法
2018/07/12 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
解析python的局部变量和全局变量
2019/08/15 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
keras中的backend.clip用法
2020/05/22 Python
生日派对邀请函
2014/01/13 职场文书
青安岗事迹材料
2014/05/14 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
合作协议书范本
2014/10/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2015年手术室工作总结
2015/05/11 职场文书
小学大队委竞选口号
2015/12/25 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis