微信小程序tab切换时保存checkbox状态

微信小程序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>