uniapp实现---类似购物车全选

目录

一、实现思路

二、实现步骤

        ①view部分展示

        ②JavaScript 内容

        ③css中样式展示

三、效果展示

四、小结 + 注意事项


一、实现思路


        点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品

添加单个多选框,在将多选框绑定到全选按钮上。

uniapp内置的checkbox以及checkbox-group:

        无法依赖其事件实现全选,样式固定,难以修改。
 

二、实现步骤

        ①view部分展示

               

<view><view class="checkboxAll"><u-checkbox-group @change="selectAll"><u-checkbox :checked="allChecked" shape="circle" activeColor="#FF6C47"></u-checkbox><text style="color: #FF6C47;">全选</text></u-checkbox-group></view><template v-for="(item,index) in itemsList"><view class="uni-list" style="padding: 32rpx" :key="index"><view class="flex-between"><view class="flex"><checkbox-group @change="changeitem(item)" checked class="checkbox" ><u-checkbox :value="item.name" :checked="item.checked" shape="circle" activeColor="#FF6C47"/></checkbox-group><view class="flex-colomn" style="margin-left: 16rpx;"><view style="font-size: 32rpx;color: #1A1A1A;">{{item.name}}</view><view style="ont-size: 24rpx;color: #666666;margin-top: 8rpx;"><textstyle="ont-size: 24rpx;color: #666666;">学号:</text>{{item.number}}</view></view></view><view class="flex"><view style="font-size: 36rpx;color: #1A1A1A;">{{item.num}}</view><view style="margin-left: 16rpx;"><u-icon name="arrow-right" size="15" color="#999999"></u-icon></view></view></view></view></template></view>

        ②JavaScript 内容

        

<script>export default {data() {return {checkList: [], //选中值allChecked: false, //是否全选title: 'checkbox 复选框',itemsList: [{name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, ]}},methods: {//单选changeitem(item) {item.checked = !item.checkedif (!item.checked) {this.allChecked = false} else {// 判断每一个列表是否是被选择的状态const cartList = this.itemsList.every(item => {return item.checked === true})if (cartList) {this.allChecked = true} else {this.allChecked = false}}},//全选,全不选selectAll() {this.allChecked = !this.allCheckedif (this.allChecked) {this.itemsList.map(item => {item.checked = true})} else {this.itemsList.map(item => {item.checked = false})}},},}
</script>

        ③css中样式展示


<style lang="scss" scoped>.checkboxAll {margin-left: 80%;margin-top: 24rpx;}.uni-list-cell {justify-content: flex-start;}</style>

三、效果展示

        可以全部选择的状态,也可以是单选状态。

               

四、小结 + 注意事项

        u-checkbox-group标签中u-checkbox没有插槽,不支持在里面写内容,必须在u-checkbox-group外面写内容布局。u-checkbox-group--->u-checkbox是可以实现的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在XCode中使用SwiftGen管理你的图片、配色、多语言文件等

SwiftGen是一个工具&#xff0c;可以为您的项目资源&#xff08;如图像、本地化字符串等&#xff09;自动生成Swift代码&#xff0c;然后你就可以像使用一个Class类一样访问你的资源了。 而且添加或更新资源后&#xff0c;SwiftGen也会自动更新用于访问资源的Class类。对于管理…

全量知识系统问题及SmartChat给出的答复 之18 生存拓扑控制+因子分析实现自然语言处理中的特征提取及语义关联

Q51. 请完整介绍一下因子分析 包括概念分类 应用和相关技术 特别是在自然语言处理中是否有使用 有哪些成功的应用&#xfffc; 因子分析是一种统计分析方法&#xff0c;旨在揭示观察数据中的潜在结构。它通过识别变量之间的潜在关联性&#xff0c;将多个变量归纳成更少数量的因…

嵌入式学习日记 24

网络: 数据传输,数据共享 1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报、流式&#xff09…

H3C 路由过滤路由引入实验

H3C 路由过滤&路由引入实验 实验拓扑 ​​ 实验需求 按照图示配置 IP 地址&#xff0c;R1&#xff0c;R3&#xff0c;R4 上使用 loopback 口模拟业务网段R1 和 R2 运行 RIPv2&#xff0c;R2&#xff0c;R3 和 R4 运行 OSPF&#xff0c;各自协议内部互通在 RIP 和 OSPF …

Wpf Grid 控件常用属性

Grid的网格布局控件&#xff0c;使用网格布局时候需要先确定行数列数。 Grid.RowDefinitions 设置行 <Grid><Grid.RowDefinitions><RowDefinition Height"45"/><RowDefinition /><RowDefinition Height"20"/></Grid.Ro…

嵌入式学习记录——进程

进程的基本概念&#xff1a; 1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top &#xff1a; 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用…

computed和methods的区别

computed和methods在Vue.js中都是用于处理数据和逻辑的方法&#xff0c;但它们之间存在一些重要的区别。 缓存机制&#xff1a;computed属性是基于它们的依赖进行缓存的。只有当它的相关依赖发生改变时才会重新计算。这意味着只要计算属性依赖的响应式属性没有发生变化&#x…

Android9-W517-使用NotificationListenerService监听通知

目录 一、前言 二、前提 三、方案 方案一 方案二 方案三 方案四 方案五 方案六 方案七 四、关于NotificationListenerService类头注释 五、结论 一、前言 NotificationListenerService可以让应用监听所有通知&#xff0c;但是无法获得监听通知的权限&#xff0c;如…

HTML标签语义化,前端开发学习计划

正文 HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签&#xff0c;其他少数为空标签&#xff1b; 常见的空标签&#xff1a; <input />、 <img />、 <area />、 <base />、 <link />等 HTML中对标签另一种…

QT国际化,将所有中文用tr函数包裹

cmake: # #设置qm文件输出位置 set_source_files_properties(adSoft_ch.ts adSoft_en.ts PROPERTIES OUTPUT_LOCATION "${CMAKE_SOURCE_DIR}/l2_viewer/dist/translations") #生成翻译文件 qt_add_lupdate(${PROJECT_NAME} TS_FILES adSoft_ch.ts adSoft_en.ts) # 生…

修改一个教材上的网站源码使它能在www服务器子目录上正常运行

修改一个教材上的网站源码&#xff0c;使它能在www服务器子目录上正常运行。 该网站源码是教材《PHPMySQL网站开发项目式教程》上带的网站源码。该源码是用 php html 写的。该源码包含对mysql数据库进行操作的php代码。以前该网站源码只能在www服务器的根目录上正常运行&…

uniapp 小程序AP配网

一、TCPSocket.js 封装TCP协议 class socket {constructor() {this.connection {};}// 创建一个TCP实例establish(monitor) {this.connection wx.createTCPSocket();this.connection.connect({ address: "192.168.1.1", port: 9100 });}// 发送消息connect(messag…

人工智能AI网站推荐

排名部分先后: arXiv: https://arxiv.org/ - arXiv 是一个由康奈尔大学维护的预印本(Preprint)服务器,研究人员可以在这里分享其最新的科学研究成果,包括人工智能领域的论文。 IEEE Xplore: IEEE Xplore - IEEE Xplore 是IEEE(电气和电子工程师协会)提供的数据库,收录了…

C语言数据结构与算法——深度、广度优先搜索(DFS、BFS)

目录 一、深度优先搜索&#xff08;Depth-First-Search 简称&#xff1a;DFS&#xff09; 无向图的深度优先搜索 有向图的深度优先搜索 二、广度优先搜索&#xff08;Breadth-First-Search 简称&#xff1a;BFS&#xff09; 无向图的广度优先搜索 有向图的广度优先搜索 深…

【工具】PIL图片颜色处理

使用前置函数&#xff0c;用于图片效果显示 from PIL import Image, ImageOps, ImageEnhance import matplotlib.pyplot as pltclass SHOW:def __init__(self):self.idx 0# 创建宽10英寸、高90英寸self.fig plt.figure(figsize(10,90))def add(self, img, title):self.idx …

【JavaEE】_Spring MVC项目之使用对象传参

目录 1. 使用对象传参 2. 后端参数重命名问题 2.1 关于RequestPara注解 本专栏关于Spring MVC项目的单个及多个参数传参一文中&#xff0c;已经介绍过了对于不同个数的参数传参问题&#xff0c;原文链接如下&#xff1a; 【JavaEE】_Spring MVC 项目单个及多个参数传参-CSD…

HTML笔记1

1&#xff0c;标签的写法 <strong>加粗内容</strong> <hr> 2&#xff0c;快速生成骨架 !加[Tab] <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content&…

2024高频前端面试题 Vue2 和 Vue3 篇

* Vue2 和 Vue3的区别&#xff1a; 1&#xff09;双向数据绑定原理的区别 2&#xff09;根节点的不同 Vue2只能一个根节点 Vue3在组件中可以放置多个根节点 3&#xff09;Vue3中采用composition API vue2:采用的选项型API(opsition API) vue3:采用的组合型API(composition A…

分类算法入门:以鸢尾花数据集为例

近两年人工智能技术蓬勃发展&#xff0c;OpenAI连续放出ChatGPT、Sora等“王炸”产品&#xff0c;大模型、AIGC等技术带来了革命性的提升&#xff0c;很多人认为人工智能将引领第四次工业革命。国内各大互联网公司也是重点投资布局&#xff0c;从个人角度来说要尽快跟上时代的潮…

Node.js最准确历史版本下载(以下载Node.js16.17.1版本为例)

先进入官网:Node.js https://nodejs.org/en 括号中LTS代表稳定版本. 嫌其他冗余博客帖子多&#xff0c;找起来费眼睛,可以到/release下载:Node.js,在blog后面加/release https://nodejs.org/en/blog/release/ 点击next翻页,跟上面同样的步骤