如果是你想要的效果，那看程式碼吧！

• .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輸出日誌，你會發現

然後就可以根據，引數做不同對應的操作了。