微信小程序实现自定义单选功能（二维数组模式）

公司有这样的需求，因为每个学校的布局不一样所以字段不是固定的，后台可自定义添加任意组合，所以后端返回的是一个二维数组。

list:[ {
      name: '建筑',
      id: 19,
      group_pid: 0,
      son: [{
        id: 60,
        name: "机房",
        group_pid: 19,
      }, {
        id: 61,
        name: "图书馆",
        group_pid: 19,
      }, {
        id: 62,
        name: "实训楼",
        group_pid: 19,
      }, ]
    }, {
      name: '校区',
      id: 21,
      group_pid: 0,
      son: [{
        id: 28,
        name: "南校区",
        group_pid: 21,
      }, {
        id: 27,
        name: "北校区",
        group_pid: 21,
      }, ]
    }]

2.效果图

 

 

 1. wxml

<view class="kj">
  <view wx:for="{{list}}" wx:key="id">
    <view style="margin-top:30rpx">
      <view>选择{{item.name}}</view>
      <view class="grid col-4 cu-load ">
        <view wx:for="{{item.son}}" wx:for-item="son" wx:key="son" data-od="{{item.id}}" data-id="{{son.id}}" bindtap="onSelected">
          <view class="{{son.checked?'checked_button':'isSele'}}">{{son.name}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

2.wxss

.kj {
padding: 0 32rpx;
}
.grid {
display: flex;
flex-wrap: wrap;
line-height: 3em;
text-align: center;
}

.grid.col-4>view {
width: 25%;
}

.isSele {
width: calc(100% - 20rpx);
background-color: white;
border-radius: 20rpx;
margin-top: 30rpx;
}

.checked_button {
width: calc(100% - 20rpx);
background-color: #36ab60;
border-radius: 20rpx;
margin-top: 30rpx;
color: white
}

3.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      name: '班级',
      id: 22,
      group_pid: 0,
      son: [{
        id: 34,
        name: "九年级",
        group_pid: 22,
      }, {
        id: 35,
        name: "八年级",
        group_pid: 22,
      }, {
        id: 36,
        name: "七年级",
        group_pid: 22,
      }, {
        id: 37,
        name: "六年级",
        group_pid: 22,
      }, {
        id: 38,
        name: "五年级",
        group_pid: 22,
      }, {
        id: 39,
        name: "四年级",
        group_pid: 22,
      }, {
        id: 40,
        name: "三年级",
        group_pid: 22,
      }, {
        id: 41,
        name: "二年级",
        group_pid: 22,
      }, {
        id: 42,
        name: "一年级",
        group_pid: 22,
      }, ]
    }, {
      name: '建筑',
      id: 19,
      group_pid: 0,
      son: [{
        id: 60,
        name: "机房",
        group_pid: 19,
      }, {
        id: 61,
        name: "图书馆",
        group_pid: 19,
      }, {
        id: 62,
        name: "实训楼",
        group_pid: 19,
      }, ]
    }, {
      name: '校区',
      id: 21,
      group_pid: 0,
      son: [{
        id: 28,
        name: "南校区",
        group_pid: 21,
      }, {
        id: 27,
        name: "北校区",
        group_pid: 21,
      }, ]
    }],
  },
  onSelected(e) {
    var id = e.currentTarget.dataset.id
    var od = e.currentTarget.dataset.od
    // console.log(id)
    for (var index = 0; index < this.data.list.length; index++) {
      if (this.data.list[index].id == od) {
        for (var i = 0; i < this.data.list[index].son.length; i++) {
          if (this.data.list[index].son[i].id == id) {
            this.data.list[index].son[i].checked = true
          } else {
            this.data.list[index].son[i].checked = false
          }
        }
      }
      this.setData({
        list: this.data.list
      })
    }
  },
})