当前位置：首页 > news >正文

微信小程序购物车全选反选功能以及合计

news 来源：原创 2025/5/9 14:34:39

微信小程序基于Vant Weapp的购物车功能实现

1、单选

使用微信小程序原生表单组件checkbox和checkbox-group

注意：checkbox原生不支持bind:change事件，checkbox-group支持

<checkbox-group bindchange="handleCheck"><checkbox value="1" checked="{{isCheck1}}"></checkbox><checkbox value="2" checked="{{isCheck2}}"></checkbox><checkbox value="3" checked="{{isCheck3}}"></checkbox>
</checkbox-group>

需要在checkbox-group上绑定bind:change事件，并在checkbox标签上赋值value属性

  handleCheck(event) {// 所有选中的商品的valuelet checkedIds = event.detail.value;  //['1']},

进行单选操作时，在change事件的参数中可以获取到所有在checkbox-group中被选中的元素的value值组成的数组

2、全选

在实现全选功能时，一般全选只有一个复选框，但是也需要套一个checkbox-group，利用原生的微信小程序封装好的bind:change事件，可以更加方便的实现功能

<checkbox-group bindchange="handleCheckAll"><checkbox checked="{{allCheck}}" value="{{true}}" />
</checkbox-group>

全选框需要帮定一个参数动态存储复选框的状态，并在change事件中修改这个状态，以及控制其他可选框的状态和全选框一致

handleCheckAll(event){this.setData({allCheck: !this.data.allCheck,isCheck1: !this.data.allCheck,isCheck2: !this.data.allCheck,isCheck3: !this.data.allCheck})
},

注意：这里看上去虽然没有用上checkbox-group的参数，但是解决了在复选框上绑定点击事件覆盖原生可选框的功能

3、全选和单选联动

在前面已经完成单选和全选的独立功能了，但是无法实现在选中所有单选的复选框时全选框也选中，

所有的单选框选没有选中时，全选框同时取消

实现思路：一般购物车的数据是根据数据渲染出来的，所以可以获取到所有商品的数量，与单选checkbx-group的回调函数中的参数进行对比，如果选中的数量小于总数，则设置全选框为false，如果选中的数量等于总数，则设置全选框为true。

实例代码：

handleCheck(event) {// 所有选中的商品的valuelet checkedIds = event.detail.value;// 全部商品的数量const length = this.data.shopList.lengthif(checkedIds.length < length){this.setData({allCheck: false})}else if(checkedIds.length == length){this.setData({allCheck: true})}
}

4、总价的计算

对于总价计算，需要在进行单选和全选时都要进行更新total，所以需要封装成一个函数，在进行操作的回调函数中调用，实现总价的实时更新

  render() {const priceShop = this.data.shopList.filter(ele => ele.isCheck === true)const total = priceShop.reduce((acc, cur) => {const value = cur.num * parseInt(cur.finVersion[1], 10); // 确保 parseInt 有一个基数，这里使用 10return acc + value;}, 0); // 初始化累加器为 0this.setData({allPrice: total})},

在render函数中先获取所有被选中的单选框，并使用reduce方法将每个数据中的数量和单价相乘并累加，然后使用setData方法更新total值，实现合计的更新

//单选的回调
handleCheckAll(event){...render()
},
//全选的回调
handleCheck(event) {...render()
}

最终效果：
Alt

微信小程序购物车全选反选功能以及合计

微信小程序基于Vant Weapp的购物车功能实现 1、单选使用微信小程序原生表单组件checkbox和checkbox-group 注意：checkbox原生不支持bind:change事件，checkbox-group支持 <checkbox-group bindchange"handleCheck"><checkbox val…...

编程日记 2025/5/9 14:34:39

大数据新视界 -- Hive 数据湖集成与数据治理（下）（26 / 30）

💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的…...

编程日记 2025/5/4 17:40:24

【基础数学二】整除，最大公约数约数，最小公倍数

编程日记 2025/5/6 10:56:50

【lua语言基础(四)】IO模型以及补充知识

💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:lua从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学更多lua语言的知识 🔝🔝 lua语言基础 1. 简单的IO模型2…...

编程日记 2025/5/9 2:16:34

Python知识分享第十九天-网络编程

网络编程概述用来实现网络互联不同计算机上运行的程序间可以进行数据交互也叫Socket编程套接字编程三要素IP地址概述设备在网络中的唯一标识分类IPV4城域网13广域网22局域网31IPV6八字节十六进制相关dos命令查看ipwindows: ipconfigmac和linux: ifconfig测试网络ping 域…...

编程日记 2025/5/5 1:12:35

【JuMP.jl】非线性规划

[JuMP] 03 非线性规划非线性规划模型非线性规划问题是线性规划问题的自然推广， 在实际的工程问题中，优化问题中的目标函数与约束不会总是线性函数，因此非线性规划的求解功能是必要的。 min ⁡ x ∈ R n f 0 ( x ) s.t. l j ≤ f j ( x ) ≤…...

编程日记 2025/5/5 6:03:49

网络（TCP）

目录 TCP socket API 详解套接字有哪些类型？socket有哪些类型？ 图解TCP四次握手断开连接图解TCP数据报结构以及三次握手（非常详细） socket缓冲区以及阻塞模式详解再谈UDP和TCP bind(): 我们的程序中对myaddr参数是这样…...

编程日记 2025/5/4 16:09:28

40分钟学 Go 语言高并发：服务性能调优实战

服务性能调优实战一、性能优化实战概述优化阶段主要内容关键指标重要程度瓶颈定位收集性能指标，确定瓶颈位置CPU、内存、延迟、吞吐量⭐⭐⭐⭐⭐代码优化优化算法、并发、内存使用代码执行时间、内存分配⭐⭐⭐⭐⭐系统调优调整系统参数、资源配置系统资源利用率…...

编程日记 2025/5/7 6:26:14

5092 星际争霸

逆序对排序； 字符串遍历； pair 特点： 两个值，第一个是字符串，第二个是逆序对数。而且没有重复的字符串。 #include<bits/stdc.h>using namespace std; typedef long long ll; const int N1e35; #define x f…...

编程日记 2025/5/8 5:31:16

AUTOSAR AP 汽车API知识点总结（Automotive API ）R24-11

汽车API知识点总结一、背景与目标背景：智能互联汽车正逐步依赖远程诊断、软件更新等功能以确保行驶安全，并且用户已习惯于通过智能设备中的应用程序控制连接设备。虽然AUTOSAR标准支持车辆软件的可更新性，但尚未提供将AUTOSAR应用产生的数据和功能安全可靠地暴露给非AUTO…...

编程日记 2025/5/6 6:33:11

vue2：Cascader 级联选择器中加载两种不同的数据结构

前言因UI调整，需要将el-tree控件更换为级联选择器，而在原树形控件中，加载了两种不同的数据结构，（参见vue2：树形控件el-tree中加载两种不同结构的数据_vue2 树形插件-CSDN博客）所以现在级联选择器中也需要加载这两种不同的数据结构。问题原本以为处理方式差不多，在…...

编程日记 2025/5/6 12:43:12

【xLSTM-Transformer序列分类】Pytorch使用xLSTM-Transformer对序列进行分类源代码

Python, Pytorch使用xLSTM-Transformer对序列进行分类源代码。xLSTM是不久前LSTM团队提出来的新模型，将xLSTM融入Transformer的Encoder中，创新型较强。另外，Transformer是完整的，即使用了Encoder、Decoder和Embedding所有模块。 …...

编程日记 2025/5/7 14:07:52

TDengine 签约安徽智质，助力海螺水泥智慧工厂升级

在当前制造业数字化转型的浪潮中，如何实现智能化、自动化与数据驱动的高效生产，成为企业提升竞争力的关键。尤其是在水泥、钢铁等传统行业，随着技术的不断进步，如何打破数据孤岛、提升生产管理效率，已经成为许多工厂亟…...

编程日记 2025/5/8 21:34:09

Hbase整合Mapreduce案例2 hbase数据下载至hdfs中——wordcount

目录整合结构准备数据下载pom.xmlMain.javaReduce.javaMap.java操作总结整合结构和案例1的结构差不多，Hbase移动到开头，后面跟随MR程序。因此对于输入的K1 V1会进行一定的修改准备在HBASE中创建表，并写入数据 create "wunaii…...

编程日记 2025/5/9 12:15:40

WHLUG丨deepin、华中科技大学开放原子开源俱乐部、 RustSBI 和清华大学开源操作系统训练营共话开源新生代成长之路

2024年11月30日下午，由 deepin（深度）社区联合华中科技大学开放原子开源俱乐部、 RustSBI 开源社区和清华大学开源操作系统训练营共同举办的WHLUG（武汉Linux用户组）线下沙龙在华中科技大学成功举办。本次活动聚集了50余…...

编程日记 2025/5/9 8:34:00

深入理解AVL树：结构、旋转及C++实现

1. AVL树的概念什么是AVL树？ AVL树是一种自平衡的二叉搜索树，其发明者是Adelson-Velsky和Landis，因此得名“AVL”。AVL树是首个自平衡二叉搜索树，通过对树的平衡因子进行控制，确保任何节点的左右子树高度差最多为1&…...

编程日记 2025/5/4 5:11:34

L15.【LeetCode笔记】相同的树

目录 1.题目代码模板 2.分析通过合理的if判断分类讨论两个根节点 1.首先,p和q都为NULL的情况最好排除 2.排除了两个都为NULL的情况,剩下的情况:1.其中一个为NULL;2.两个都不为NULL 写法1 写法2 3.只剩下最后一种情况:p和q都不为NULL 3.代码提交结果 1.题目 https…...

编程日记 2025/5/5 1:42:52

【算法】【优选算法】位运算（下）

目录一、：⾯试题 01.01.判定字符是否唯⼀1.1 位图1.2 hash思路1.3 暴力枚举二、268.丢失的数字2.1 位运算，异或2.2 数学求和三、371.两整数之和四、137.只出现⼀次的数字 II五、⾯试题 17.19.消失的两个数字一、：⾯试题 01.01.判定字符是…...

编程日记 2025/5/8 17:51:00

网络——Socket与WebSocket

Socket与WebSocket都是网络通信中的重要概念，但它们在原理、应用场景及特性上存在显著的差异。以下是对两者的详细比较： 一、Socket 定义：Socket（套接字）是计算机网络中的一个抽象层，它允许应用程序通过网…...

编程日记 2025/4/22 18:59:25

Springboot3整合Redis

书接上篇《Redis 安装篇（阿里云服务器）_阿里云安装redis-CSDN博客》，安装好Redis后，就需要在springboot项目中使用Redis了。一、SpringBoot整合Redis 1.添加坐标  <dependency><groupId>org.sp…...

编程日记 2025/5/6 3:27:14

Java CountDownLatch 用法和源码解析

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/5/6 11:57:23

微信小程序3-显标记信息和弹框

感谢阅读，初学小白，有错指正。一、实现功能： 在地图上添加标记点后，标记点是可以携带以下基础信息的，如标题、id、经纬度等。但是对于开发来说，这些信息还不足够，而且还要做到点击标记点时&a…...

编程日记 2025/5/4 18:17:56

Android 消息队列之MQTT的使用：物联网通讯，HTTP太重了，使用MQTT；断网重连、注册、订阅、发送数据和接受数据，实现双向通讯。

目录： 问题MQTT是什么以及为什么使用如何使用：第一阶段、基础功能如何使用：第二阶段、增加断网重连如何使用：第三阶段、封装一、问题在开发的时候，我们一般都使用Http和后台进行通讯，比如我们是开发物联…...

编程日记 2025/5/7 2:01:41

详解Java数据库编程之JDBC

目录首先创建一个Java项目在Maven中央仓库下载mysql connector的jar包针对MySQL版本5 针对MySQL版本8 下载之后，在IDEA中创建的项目中建立一个lib目录，然后把刚刚下载好的jar包拷贝进去，然后右键刚刚添加的jar包，点击‘添…...

编程日记 2025/5/6 17:22:53

详解C++类与对象（四）

文章目录 1.类型转换1.1 前言1.2 类型转换的性质 2.static成员2.1 前言2.2 static的基本概念 3.友元4.内部类5.匿名对象 1.类型转换 1.1 前言在C中，由于程序员可以自己显示定义一个新的类。这样就会出现一个问题：程序员自己显示定义的类类型与编译器中…...

编程日记 2025/5/9 5:30:17

使用 postman 传递 binary 类型的图片到后端接口遇到的坑

使用 psotman 传 binary 类型图片报错： -2024-12-04 [http-nio-9090-exec-1] WARN org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver Resolved [org.springframework.http.converter.HttpMessageNotReadableException: Required r…...

编程日记 2025/5/9 1:46:32

第9章大模型的有害性（上）

9.1 引言本章将探讨大型语言模型（LLMs）可能带来的有害性，重点讨论以下几个方面： 性能差异社会偏见和刻板印象在后续内容中，还会涉及其他层面的危害，如有害信息、虚假信息、隐私和安全风险、版权问题、…...

编程日记 2025/5/9 14:01:31

计算机视觉——相机标定(Camera Calibration)

文章目录 1. 简介2. 原理3. 相机模型3.1 四大坐标系3.2 坐标系间的转换关系3.2.1 世界坐标系到相机坐标系3.2.2 相机坐标系到图像坐标系3.2.3 像素坐标系转换为图像坐标系3.2.4 世界坐标转换为像素坐标 3.3 畸变3.3.1 畸变类型3.3.1.1 径向畸变（Radial Distortion&a…...

编程日记 2025/5/9 14:28:18

Java爬虫技术全解析：从入门到精通

引言在信息爆炸的今天，数据成为了最宝贵的资源之一。爬虫技术作为获取网络数据的重要手段，广泛应用于数据采集、信息聚合、市场分析等多个领域。Java作为一种强类型、面向对象的编程语言，以其稳健的性能和跨平台的特性，成为了开…...

编程日记 2025/5/6 23:18:36

leetcode hot100【Leetcode 416.分割等和子集】java实现

Leetcode 416.分割等和子集题目描述给定一个非负整数的数组 nums ，你需要将该数组分割成两个子集，使得两个子集的元素和相等。如果可以分割，返回 true ，否则返回 false。示例 1： 输入：nums [1,5,11,…...

编程日记 2025/5/4 23:53:50

位段详解+代码展示

系列文章目录 🎈 🎈 我的CSDN主页:OTWOL的主页，欢迎！！！👋🏼👋🏼 🎉🎉我的C语言初阶合集：C语言初阶合集，希望能…...

编程日记 2025/5/9 0:26:43

python实现c++中so库调用及dbus服务开发

本期介绍主要分两块，一块是python如何调用so库，另一块是dbus服务的注册与调用； python调用so库 1. c++源码 # test.h文件#include<iostream> using namespace std;extern "C"{ int cacl(int a, int b); struct student{char sname[50];int score;}; stud…...

编程日记 2025/5/9 14:16:20

如何进行GC调优

目录 1、GC是什么? 垃圾回收算法、收集器等 2、优化目标 3、优化策略这个属于较为开放题目，可以结合自己项目实战出发，体现JVM调优。 1、GC是什么? 垃圾回收算法、收集器等 2、优化目标 (1) 将进入老年代的对象数量降到最低 (2) 减少FullGC的执行…...

编程日记 2025/5/4 17:27:24

JAVA ｜日常开发中读写TXT文本详解

JAVA ｜日常开发中读写TXT文本详解前言一、读取 TXT 文本1.1 使用BufferedReader读取1.2 使用Scanner读取二、写入 TXT 文本2.1 使用BufferedWriter写入2.2 使用PrintWriter写入2.3 字节流写入（FileOutputStream）后转换为字符流（…...

编程日记 2025/5/5 4:46:37

开源模型应用落地-安全合规篇-用户输入价值观判断（三）

一、前言在深度合规功能中，对用户输入内容的价值观判断具有重要意义。这一功能不仅仅是对信息合法性和合规性的简单审核，更是对信息背后隐含的伦理道德和社会责任的深刻洞察。通过对价值观的判断，系统能够识别可能引发不当影响或冲突的内容，从而为用户提供更安全、更和谐的…...

编程日记 2025/5/9 13:43:07

apache部署若依前后端分离项目（开启SSL）

网站部署之后，大多数需要配置https，所以本章教程，介绍使用apache部署若依前后端项目的时候，如何开启SSL，以及如何配置SSL证书。一、安装ssl模块默认情况下，ssl模块是没有安装的。需要手动安装，否则直接配置SSL模块的时候，会报错。 sudo yum install mod_ssl二、查询s…...

编程日记 2025/5/9 14:18:54

VMware Workstation Pro安装教程（全图文保姆级）

一、前言系统：Windows 11时间：2024/12/04需求：注册：broadcom（邮箱）难点：在官网找到下载链接二、说明建议前往官网（https://www.vmware.com）下载，可能加…...

编程日记 2025/5/8 22:16:09

【机器学习】—Transformers的扩展应用：从NLP到多领域突破

好久不见！喜欢就关注吧~ 云边有个稻草人-CSDN博客目录引言一、Transformer架构解析 （一）、核心组件 （二）、架构图二、领域扩展：从NLP到更多场景 1. 自然语言处理（NLP） 2…...

编程日记 2025/5/5 7:21:26

Linux权限机制深度解读：系统安全的第一道防线

文章目录前言‼️一、Linux权限的概念‼️二、Linux权限管理❕2.1 文件访问者的分类（人）❕2.2 文件类型和访问权限（事物属性）✔️1. 文件类型✔️2. 基本权限✔️3. 权限值的表示方法 ❕2.3 文件访问权限的相关设置方法✔️1. ch…...

编程日记 2025/5/9 13:38:09

【数据集】细胞数据集：肿瘤-胎儿重编程的内皮细胞驱动肝细胞癌中的免疫抑制性巨噬细胞（Sharma等人）

引用此数据集： Sharma, Ankur (2020), “Onco-fetal reprogramming of endothelial cells drives immunosuppressive macrophages in Hepatocellular Carcinoma (Sharma et al)”, Mendeley Data, V1, doi: 10.17632/6wmzcskt6k.1 下载地址：Onco-feta…...

编程日记 2025/5/9 14:27:25

LangChain学习笔记（一）-LangChain简介

LangChain学习笔记（一）-LangChain简介 langChain是一个人工智能大语言模型的开发框架，主要构成为下图。一、核心模块 （一）模型I/O模块负责与现有大模型进行交互，由三部分组成： 提…...

编程日记 2025/5/9 3:03:46

【Dubbo03】消息队列与微服务之dubbo-admin 二进制与编译安装

实战案例：二进制安装 dubbo-admin 新版用Golang重构，提供了二进制包，可以直接部署 #下载二进制包 [rootubuntu2204 ~]#wget https://github.com/apache/dubbo-admin/releases/download/0.5.0/apache-dubbo-admin-0.5.0-bin-release.tar.gz …...

编程日记 2025/5/4 3:04:48

常见问题QA的前端代码

这个的后端代码参见此文使用语言向量建立常见问题的模糊搜索-CSDN博客https://blog.csdn.net/chenchihwen/article/details/144207262?spm1001.2014.3001.5501 这段代码实现了一个简单的问答页面，页面分为左右两部分，左侧用于展示对话记录&#xff0c…...

编程日记 2025/5/9 13:50:08

【Java基础面试题010】Java中的基本数据类型有哪些？

相关知识补充：《Java从入门到精通(JDK17版)》_尚硅谷电子书.pdf Autism_Btkrsr/Blog_md_to_pdf - 码云 - 开源中国 (gitee.com) 回答重点 Java提供了8中基本数据类型整型： byte：占用1字节，取值范围 -128 到 127short&#x…...

编程日记 2025/5/9 13:34:51

记录部署dvwa靶场踩的几个坑

DVWA reCAPTCHA key: Missing 解决方法：网上随便copy一个，粘贴到config.inc.php配置文件里，具体我也是参考这篇文章的：DVWA下载、安装You dont have permission to access this resource.Server unable to read htaccess file, de…...

编程日记 2025/5/7 23:35:17

【Pytorch】torch.reshape与torch.Tensor.reshape区别

问题引入： 在Pytorch文档中，有torch.reshape与torch.Tensor.reshape两个reshape操作，他们的区别是什么呢？ 我们先来看一下官方文档的定义： torch.reshape： torch.Tensor.reshape: 解释： 在p…...

编程日记 2025/5/9 13:41:24

GPT vs Claude到底如何选？

美国当地时间6月20日，OpenAI的“劲敌”Anthropic公司发布了最新模型Claude 3.5 Sonnet。据Anthropic介绍，该模型是Claude 3.5系列模型中的首个版本，也是Anthropic迄今为止发布的“最强大、最智能”的模型。它不仅在性能上超越了竞争对手和自家…...

编程日记 2025/5/4 17:40:42

基于C++实现的（控制台）双人俄罗斯方块小游戏

基于win32控制台应用程序的双人俄罗斯方块小游戏 1. 课题概述 1.1 课题目标和主要内容使用visual studio 2015在win32控制台应用程序下用多线程实现双人同时进行俄罗斯方块的桌面游戏。最终将要完成的效果如图1.1所示，左右共两片工作区，也是游戏的主…...

编程日记 2025/5/4 12:59:19

Linux-虚拟环境

文章目录一. 虚拟机二. 虚拟化软件三. VMware WorkStation四. 安装CentOS操作系统五. 在VMware中导入CentOS虚拟机六. 远程连接Linux系统1. Finalshell安装2. 虚拟机网络配置3. 连接到Linux系统七. 虚拟机快照一. 虚拟机借助虚拟化技术，我们可以在系统中&#…...

编程日记 2025/5/9 14:21:40

uniapp开发微信小程序笔记10-触底加载

前言： 触底加载需求描述： 经常在做一些商品列表页的时候，如果一次性加载大量数据会影响性能，一般都是先加载10-20条，等用户向下滑到底部时再加载新的数据并渲染上去。 1、官方提供了一个API：onReachBott…...

编程日记 2025/5/9 13:09:45

1、单选

2、全选

3、全选和单选联动

4、总价的计算

相关文章：