微信小程序之购物车的功能

1.购物车里面功能无非就是删除商量,增加(减少)数量,单全选,商品合计

2.这段代码var cartItems = this.data.cartItems  获取购物车里面的商品,之后在通过下标e.currentTarget.dataset.index来获取当前的商品

 

选择事件(单全选)

  //单选
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },

    // 全选
   selectedCart:function(e){

    var cartItems = this.data.cartItems   //获取购物车列表
    var index = e.currentTarget.dataset.index;  //获取当前点击事件的下标索引
    var selected = cartItems[index].selected;    //获取购物车里面的value值

    //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();
    wx.setStorageSync("cartItems", cartItems)
   }

购物车数量增加减少

add:function (e) {
     var cartItems = this.data.cartItems   //获取购物车列表
     var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引
     var value = cartItems[index].value  //获取购物车里面的value值

     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()

     wx.setStorageSync("cartItems", cartItems)  //存缓存
   },

    //减
   reduce: function (e){
     var cartItems = this.data.cartItems  //获取购物车列表
     var index = e.currentTarget.dataset.index  //获取当前点击事件的下标索引
     var value = cartItems[index].value  //获取购物车里面的value值

    if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

删除事件

 //删除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //获取购物车列表
     var index = e.currentTarget.dataset.index  //获取当前点击事件的下标索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },

商品价格合计

//合计
   getsumTotal: function () {
     var sum = 0
     for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新数据
     this.setData({
       total: sum
     })
   },

整合代码

var json = require(‘../../data/Home_data.js‘)

Page({
  data: {
    cartItems:[],
    total:0,
    CheckAll:true
  },
  onLoad:function(e){

  },
   onShow: function () {
     var cartItems = wx.getStorageSync("cartItems")
     this.setData({
       cartList: false,
       cartItems: cartItems
     })
     this.getsumTotal()

   },

  //选择
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },
   add:function (e) {
     var cartItems = this.data.cartItems   //获取购物车列表
     var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引
     var value = cartItems[index].value  //获取购物车里面的value值

     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()

     wx.setStorageSync("cartItems", cartItems)  //存缓存
   },

    //减
   reduce: function (e){
     var cartItems = this.data.cartItems  //获取购物车列表
     var index = e.currentTarget.dataset.index  //获取当前点击事件的下标索引
     var value = cartItems[index].value  //获取购物车里面的value值

    if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

    // 选择
   selectedCart:function(e){

    var cartItems = this.data.cartItems   //获取购物车列表
    var index = e.currentTarget.dataset.index;  //获取当前点击事件的下标索引
    var selected = cartItems[index].selected;    //获取购物车里面的value值

    //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();
    wx.setStorageSync("cartItems", cartItems)
   },

   //删除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //获取购物车列表
     var index = e.currentTarget.dataset.index  //获取当前点击事件的下标索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },

   //合计
   getsumTotal: function () {
     var sum = 0
     for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新数据
     this.setData({
       total: sum
     })
   },
})

购物车的操作就这么点,其实理解了很简单,小程序的语法和vue的语法很相识,学过vue的写小程序是很简单的,第一次写博客写的不好请谅解~~

代码以上传到githun上:https://github.com/Mynameisfwk/wechat-app-vivo

原文地址:https://www.cnblogs.com/fangwenkang/p/8258838.html

时间: 2024-10-04 22:47:48

微信小程序之购物车的功能的相关文章

微信小程序开发平台新功能「云开发」快速上手体验

微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一个比较稳定的节奏进行功能的开放与更新,不激进但是又不怠慢,就一直像微信产品的节奏一样,而在生活中我们使用微信小程序的频率也慢慢高起来,如 KFC 自助点个餐.下单一些较冷门的商品等等. 而我给大家免费更新的「微信小程序开发视频教程」大纲也一直在修正与增加,从 40 集增加到 60 集,在云开发发布后

微信小程序又一爆炸功能上线-云开发

云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下

微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

微信小程序后台持续定位功能使用

微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https

微信小程序 - 实现购物车结算

示例源码下载:小程序-实现购物车结算 原文地址:https://www.cnblogs.com/cisum/p/9780097.html

微信小程序 - 时间进度条功能

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,改功能怎么实现看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text b

【微信小程序】---Socket聊天功能实现

一.什么是socket? 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socke 本章案例中我们使用HTML5中的webSocket. websocket是HTML5开始提供的一种浏览器与服务器进行双向通讯的网络技术. 使用websocket浏览器和服务器只需要做一个握手的动作,然后浏览器和服务器之间就形成了一条快速的通道,两者之间就可以互相传送 好处: 节省资源:互相沟通的Header是很小的 大概是2bytes. 推送信息:不需要客户端请求,服务器可以主动传送

微信小程序附近的店功能即将开启,小程序员福利帖

微信小程序,购物车模块代码解读

tapAddCart: function (e) { this.addCart(e.target.dataset.id);//传入商品id值到addCart函数中 }, tapReduceCart: function (e) { this.reduceCart(e.target.dataset.id);//传入商品id值到reduceCart函数中 }, addCart: function (id) { // console.log("id" + id);//获取id值,用来区分菜品