微信小程序checkbox多选

效果图
在这里插入图片描述

<view class="block"><view class="header"><view class="header-left"><text class="pu-title">数据</text><text class="pu-tip">至少选择一个指标</text></view><image bind:tap="onVisibleChange" class="close" src="/images/data/close.png" /></view><t-checkbox-group value="{{checkAllValues}}" bind:change="onChange"><t-checkbox label="多选" icon="rectangle" checkAll /><view  class="popup-content"><view wx:for="{{popupList}}" wx:key="index" class="pell-box"><t-checkboxclass="p-cell {{_.contain(checkAllValues, item.value) ? 'activeCell' : checkAllValues.indexOf(item.value)}}"value="{{item.value}}"icon="none"><view style="{{_.contain(checkAllValues, item.value) ? 'color: #FA541C' : 'color: #333333'}}">{{item.name}}</view></t-checkbox></view></view></t-checkbox-group><view class="handleConfirm" bindtap="handleConfirm">确定</view></view>

data里定义

data: {
popupList: [{ name: '当前班组', value: '当前班组', check: false},{ name: '今天', value: '今天', check: false},{ name: '本周', value: '本周', check: false},{ name: '本月', value: '本月', check: false},{ name: '自定义时间', value: '自定义时间', check: false},],checkAllValues: [],
}
onChange(e) {console.log('checkbox', e.detail.value);this.setData({ checkAllValues: e.detail.value });},
.popup-content {display: flex;flex-wrap: wrap;padding: 0 30rpx 30rpx 30rpx;
}
.pell-box {margin-right: 38rpx;margin-bottom: 30rpx;
}
.p-cell {width: 201rpx;height: 62rpx;border-radius: 6rpx;border: 1rpx solid #333333;box-sizing: border-box;font-size: 28rpx;font-family: PingFangSC, PingFang SC;padding: 0;text-align: center;display: flex;align-items: center;justify-content: center;
}
.pell-box:nth-child(3n) {margin-right: 0;
}
.close {width: 31rpx;height: 30rpx;
}
.block {width: 100vw;min-height: 340px;background: #fff;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;
}
.header {display: flex;height: 100rpx;padding: 30rpx 30rpx 0 30rpx;justify-content: space-between;
}
.header-left {display: flex;flex-direction: column;
}
.pu-title {font-size: 34rpx;font-family: PingFangSC, PingFang SC;font-weight: bold;color: #222222;
}
.pu-tip {font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 500;color: #666666;
}
.handleConfirm {width: 690rpx;height: 80rpx;background: #FF6634;border-radius: 10rpx;font-size: 36rpx;font-family: PingFangSC, PingFang SC;font-weight: 500;color: #FFFFFF;line-height: 80rpx;text-align: center;margin: 0 auto;
}
.activeCell {background: #FFF8F5;border-radius: 6rpx;border: 1rpx solid #FA541C;box-sizing: border-box;color: rgba(250, 84, 28, 1)!important;
}
.t-checkbox__title, .t-checkbox__title--checked {color: rgba(250, 84, 28, 1)!important;
}

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

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

相关文章

go-redis hash slot 之旅

搭建redis 集群 创建一个网桥 docker network create -d bridge --subnet192.168.148.0/24 --gateway192.168.148.1 -o parenteno1 redis-net通过docker 文件创建redis 集群&#xff0c; 这里注意要不要使用redis 7以上的版本&#xff0c;不然会出问题 version: "3&quo…

Tomcat组件架构与数据流

一、背景与简介 Tomcat我们都知道是一个开源的、实现了大部分Java EE、Servlet、JSP规范的Servlet容器, 允许我们将实现了Serlvet接口的Web程序war包进行部署运行。 但是你有对Tomcat做过细致的学习么? 我相信大部分同学和我一样&#xff0c;之前也是只会进行简单使用&#x…

django线上教育学习平台大数据分析系统python

随着互联网技术不断地发展&#xff0c;网络与大数据成为了人们生活的一部分&#xff0c;而线上教育平台大数据分析作为网上应用的一个全新的体现&#xff0c;由于其特有的便捷性&#xff0c;已经被人们所接受。目前主流的线上教育平台大数据分析服务不仅不明确并且管理盈利较低…

专业课130+总分420+南京大学851信号与系统考研经验南大电子信息与通信系统

经过一年的复习&#xff0c;顺利上岸&#xff0c;被南京大学录取&#xff0c;今年专业课130&#xff0c;总分420&#xff0c;回忆这一年的复习还是有很多经验分享&#xff0c;希望对大家复习有帮助。 专业课&#xff1a; 南京大学851信号与系统难度这几年无论是范围还是难度都…

【MySQL】学习并使用DQL实现排序查询和分页查询

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-SP91zTA41FlGU0Ce {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

计算机服务器中了DevicData勒索病毒如何解密,DevicData勒索病毒解密流程

网络数据安全一直是企业关心的主要话题&#xff0c;近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了DevicData勒索病毒攻击&#xff0c;导致企业计算机服务器瘫痪无法正常工作&#xff0c;严重影响了工作业务开展。经过云天数据恢复中…

【已解决】c++ qt选中该行为什么该列部分变色

笔者开启了QTableView中交替行改变颜色&#xff0c;发现笔者自定义绘制的水平滚动条&#xff0c;在选中后不发生颜色改变&#xff0c;这让笔者很疑惑。笔者查阅资料后发现&#xff0c;自定义绘制的控件&#xff0c;要自身设置颜色。当笔者解决了这个问题时&#xff0c;顺手就将…

【SAR成像】基于RD、CS和ωk算法的合成孔径雷达成像算法原理与实现

基于RD、CS和ωk算法的合成孔径雷达成像算法实现 前言SAR基本概念雷达获取数据的几何关系低斜视角下的回波信号模型 RADARSAT-1主要参数数据预处理数据读取与再封装数据补零 成像算法坐标轴的产生RD算法距离压缩距离徙动矫正方位压缩 CS算法第一次相位相乘 变标后的信号第二次相…

基于若依的ruoyi-nbcio流程管理系统自定义业务实现一种简单的动态任务标题需求

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/n…

[Android] 240204批量生成联系人,短信,通话记录的APK

平常在做测试的时候&#xff0c;需要批量生成很多测试数据&#xff1b; 陌生人 联系人名字的生成支持随机生成&#xff0c;也可以自定义生成&#xff0c;自定义生成陌生人的数据&#xff0c;联系人的名字是否带索引&#xff1b; 通话记录 随机生成通话记录&#xff0c;在生…

free5GC+UERANSIM

使用arp、ifconfig、docker inspect及网桥brctl 相关命令&#xff0c;收集容器IP及Mac地址相关信息&#xff0c;可以梳理出UERANSIMfree5GC模拟环境组网&#xff0c;如下图所示&#xff1a; 如上图所示&#xff1a;环境基于ubuntu 18.04 VMware虚机部署&#xff0c;5GC网元分别…

【Python】Unindent does not match any outer indentation level

这个问题一般是代码缩进问题导致的&#xff0c;规范代码缩进格式即可&#xff0c;如图&#xff1a; 这个问题是因为报异常的那行代码下的方法缩进问题导致&#xff0c;def calendar_f(): 方法名前面多了一个空格。 删除空格即可解决此问题。

【python】python爱心代码【附源码】

一、实现效果&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码&#xff1a; import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…

Fink CDC数据同步(五)Kafka数据同步Hive

6、Kafka同步到Hive 6.1 建映射表 通过flink sql client 建Kafka topic的映射表 CREATE TABLE kafka_user_topic(id int,name string,birth string,gender string ) WITH (connector kafka,topic flink-cdc-user,properties.bootstrap.servers 192.168.0.4:6668…

天拓四方:边缘计算网关功能、特点与应用举例

传统的数据处理方式面临网络延迟、带宽限制和安全风险等问题。为了解决这些问题&#xff0c;边缘计算技术应运而生&#xff0c;而边缘计算网关作为其核心组件&#xff0c;正发挥着越来越重要的作用。边缘计算网关位于数据源和云数据中心之间。它具备数据采集、协议转换、数据处…

视觉SLAM十四讲学习笔记(一)初识SLAM

目录 前言 一、传感器 1 传感器分类 2 相机 二、经典视觉 SLAM 框架 1 视觉里程计 2 后端优化 3 回环检测 4 建图 5 SLAM系统 三、SLAM 问题的数学表述 四、Ubuntu20.04配置SLAM十四讲 前言 SLAM: Simultaneous Localization and Mapping 同时定位与地图构建&#…

交友系统---让陌生人变成熟悉人的过程。APP小程序H5三端源码交付,支持二开。

随着社交网络的发展和普及&#xff0c;人们之间的社交模式正在发生着深刻的变革。传统的线下交友方式已经逐渐被线上交友取而代之。而同城交友正是这一趋势的产物&#xff0c;它利用移动互联网的便利性&#xff0c;将同城内的人们连接在一起&#xff0c;打破了时空的限制&#…

机器视觉系统设计:视觉系统中的成像基准

开发视觉系统的一个重要活动是验证其部署是否符合工程规范。一个成功的视觉应用程序的两个特点是它无需工程师干涉情况下正常工作了多长时间&#xff0c;以及它的维护和复制部署是多么简易。实现所有如上所述目标的一个关键步骤是确定视觉系统的基准。 在这里使用的上下文中&a…

移动云ONAIR媒体云全解读!媒体内容数字化融合一站式解决方案

当下&#xff0c;传统媒体面临着诸多挑战&#xff0c;如何利用信息技术提升内容的质量、形式和分发效率&#xff0c;成为媒体行业的迫切需求。移动云作为数字中国建设的“主力军”&#xff0c; 立足于新兴媒体与云计算市场的变化与需求&#xff0c;推出了ONAIR 媒体云解决方案&…

vue2学习笔记(2/2)

vue2学习笔记&#xff08;1/2&#xff09; vue2学习笔记&#xff08;2/2&#xff09; 文章目录 1. 初始化脚手架2. 分析脚手架&render函数文件结构图示及说明main.jsindex.htmlApp.vueSchool.vueStudent.vue 关于不同版本的Vue修改默认配置vue.config.js配置文件 3. ref属…