小程序六选一分两层的界面布局

六选一还分为两层的界面布局

前两天接到一个这样的布局，需求是在同一个集合中做六选一的单选，如图：

我下面我就写两种实现方式：

第一种：二维数组

XML中：
第一个数组中放四个，第二个数组中也是放四个，不过中间两个是空数据。

<view class='one' style='border:1px solid red;margin:20px;' wx:for="{
  {groups}}" wx:for-index="groupindex" wx:for-item="groupitem">  
      <view class='one_item' wx:for="{
  {groupitem}}" wx:for-index="giindex"  wx:for-item="giitem">{
  {giitem.id}}</view>
    </view> 

    <view clas