当前位置:网站首页>微信小程序tab切换时保存checkbox状态
微信小程序tab切换时保存checkbox状态
2022-08-10 00:13:00 【Colesyn L.】
微信小程序tab切换时保存checkbox状态
直接上代码
javascript
//先处理后端返回的数据
//因为我这里是两层所以要 i.list 一层可以直接循环添加checked
let arr = data.data.data;
arr.forEach(i => {
i.show = false;
i.list.forEach(v => {
v.checked = false
})
})
arr[0].show = true;
this.setData({
list: arr })
//切换函数
bannav(e) {
let navid = e.currentTarget.dataset.id;
this.setData({
navid })
this.getData();
//主要是这里
//获取选中的id 和 已有的数据进行比较 然后 将checkd 重新赋值
setTimeout(() => {
this.data.list.forEach(i => {
i.list.forEach(v => {
this.data.selectIds.forEach(t => {
if (v.id == t) {
v.checked = true;
}
})
})
})
this.setData({
list: this.data.list })
}, 500)
},
//复选框选中状态
checkboxChange(e) {
let bigindex = e.target.dataset.bigindex;
let smallIndex = e.target.dataset.smallindex;
const items = this.data.list[bigindex].list;
const values = e.detail.value;
let carr = this.data.selectIds
//选中
if (values.length) {
let cid = items.findIndex(v => v.id == values[0]);
let T = `list[${
bigindex}].list[${
cid}].checked`;
this.setData({
[T]: !this.data.list[bigindex].list[smallIndex].checked
})
carr.push(...values)
this.setData({
selectIds: carr })
} else {
//取消选中
let T = `list[${
bigindex}].list[${
smallIndex}].checked`;
this.setData({
[T]: false
})
let ids = [this.data.list[bigindex].list[smallIndex].id.toString()]
let lists = carr.filter(items => {
if (!ids.includes(items)) return items
})
this.setData({
selectIds: lists })
}
},
html
//第一层
<view class="list" wx:for="{
{list}}" wx:key="index">
<view class="list-title" bindtap="go_view" data-name="{
{item.name}}">
<view>{
{
item.name}}</view>
<image src="../../images/down.png"></image>
</view>
<block wx:if="{
{item.show}}">
//第二层
<view class="list-item" wx:for="{
{item.list}}" wx:key="index" wx:for-index="childindex">
<checkbox-group data-bigindex="{
{index}}" data-smallIndex="{
{childindex}}" bindchange="checkboxChange" style="display: flex;">
<label class="checkbox">
<checkbox value="{
{item.id}}" checked="{
{item.checked}}" />
</label>
<view class="checkbox-items">{
{
item.content}}</view>
</checkbox-group>
</view>
</block>
</view>
边栏推荐
- Penetration Testing and Offensive and Defense Confrontation - Vulnerability Scanning & Logic Vulnerability (Part1)
- 删除表空间数据文件
- XSS高级 svg 复现一个循环问题以及两个循环问题
- -Knight Parade-
- 小程序实现搜索功能续
- 有PEG-Biotin参与的(CAS:1778736-18-7)Biotin-PEG4-OH广泛用于分子靶点检测
- Kubernetes服务接入Istio
- 五种定位——粘性定位
- ITK编译remote库
- flask——请求、响应、请求扩展、session、闪现、蓝图、g对象、flask-session
猜你喜欢
Characteristics of the (CAS:1527486-16-3TAMRA-azide-PEG3-Biotin) reaction in biotin azide!
CVPR22 Oral|通过多尺度token聚合分流自注意力,代码已开源
MySQL最大连接数限制如何修改
How to add control panel to right click menu in win7
Pagoda measurement - building LightPicture open source map bed system
《痞子衡嵌入式半月刊》 第 60 期
3.11-程序基本的控制语句 3.12-表达式 3.13-数据类型 3.14-常量/变量 3.15-标识符
PEG 衍生物Biotin-PEG1-OH(cas:95611-10-2,2-生物素氨基乙醇)优势说明
Fedora 36 dnf 安装ModSecurity和 OWASP 核心规则集
XSS高级 svg 复现一个循环问题以及两个循环问题
随机推荐
【CAS:41994-02-9 |Biotinyl tyramide】生物素基酪氨酰胺价格
openEuler 知:abi 检测
Involved in PEG-Biotin (CAS: 1778736-18-7) Biotin-PEG4-OH is widely used in molecular target detection
你有对象类,我有结构体,Go lang1.18入门精炼教程,由白丁入鸿儒,go lang结构体(struct)的使用EP06
深度剖析 Apache EventMesh 云原生分布式事件驱动架构
-Chess game-
flask——请求、响应、请求扩展、session、闪现、蓝图、g对象、flask-session
Fedora 36 dnf 安装ModSecurity和 OWASP 核心规则集
3.4 - 编译与解释 3.5 - 编译过程 3.8 - 文法
ASEMI整流桥GBJ1010参数,GBJ1010规格,GBJ1010封装
3.1 - 程序设计语言 3.2 - 高级语言的特点及引用 3.3 - 静态/动态类型语言
-向量点积-
基于FPGA的任意字节数的串口接收(含源码工程)
生物素叠氮化物中的(CAS:1527486-16-3TAMRA-azide-PEG3-Biotin)反应的特点!
Prometeus 2.31.0 新特性
R语言使用coxph函数构建生存分析回归模型,使用forestmodel包的forest_model函数可视化生存回归模型对应的森林图
Leetcode80. 删除有序数组中的重复项 II
Kubernetes 60个为什么
FITC标记生物素(FITC-生物素|CAS:134759-22-1)有哪些知识了?
基于Web的疫情隔离区订餐系统