小程序多排多列（grid）界面绘制，并获取view对应的index参数

如果是你想要的效果，那看代码吧！

• .js

data: {
    routers: [
      {
        name: '姓名',
        text: '输入姓名',
        
      },
      {
        name: '性别',
        text: '输入性别',
       
      },
      {
        name: '生日',
        text: '输入生日',
      },
      {
        name: '身高',
        text: '输入身高',
      },
      {
        name: '体重',
        text: '输入体重',
      },
      {
        name: '肩宽',
        text: '输入肩宽',
      }
    ]

  },

• .wxml

<!-- grid   画个重点-->
  <view class="grids">
        <view class="grid" wx:for="{{routers}}" wx:key="index" wx:for-index="bindex">
            <view>
                <view class='grid-bg'  bindtap='clickTap' data-bindex='{{bindex}}'>
                   
                        <text class="grid-label2">{{item.text}}</text>
                    
                    <text class="grid-label">{{item.name}}</text>
                </view>
            </view>
        </view>
    </view>

• .css

.grids {
    position: relative;
    overflow: hidden;
}
 
 .grids:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
} 
 
 .grids:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
} 
 
 /* 睁大眼睛看这里，尤其下面的width，50%是两列，33.3333%是三列，25%是四列 */
 
.grid {
    position: relative;
    float: left;
    padding: 20px 10px;
    width: 50%;                                     ====》》》》》看这里，决定列数
    box-sizing: border-box;
}
 
 .grid:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
} 
 
 .grid:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
} 
 
.grid-bg {
    position: relative;
    float: left;
    padding: 0px 0px;
    width: 100%;
    box-sizing: border-box;
}
.grid-label2{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-size: 12px;
  color: rgb(187, 184, 184)
    
}
 
.grid-label {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-weight: bold;
    color: rgb(116, 117, 116);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

• 获取index，或者其他参数
  现在从新看wxml里的内容，看那个画了重点的地方。

<view class="grid" wx:for="{{routers}}" wx:key="index" wx:for-index="bindex">
           
                <view class='grid-bg'  bindtap='clickTap' data-bindex='{{bindex}}'>
                   

在这里你会看到wx:for-index=“bindex”，以及下一层view里的data-bindex=’{{bindex}}’，其实就是通过for-index的使用，进行index传递的，在对应的js文件里写上bindtap所对应的方法：

 clickTap: function(event) {
    console.log(event)
    console.log(event.currentTarget.dataset.bindex)
  },

通过上面的console输出日志，你会发现

然后就可以根据，参数做不同对应的操作了。