小程序多排多列(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输出日志,你会发现
然后就可以根据,参数做不同对应的操作了。