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

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

   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;
   }
   
   .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
         })
       }
     },
   })