微信官方文档提供的列表只能单列显示,类似Android的ListView,偶尔也会遇到多列列表的需求。
下面就是一个带点击特效的两列列表:
wxml
<view class="gridview" style='background:white;'>
<view class="gridview-item" wx:for="{{list}}" wx:key="name">
<view class='gridview-item__bg'>
<view class='gridview-item__txt'>{{item.txt}}</view>
</view>
</view>
</view>
wxss
/* 两列列表样式 start */
.gridview {
position: relative;
overflow: hidden;
}
.gridview: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);
}
.gridview: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);
}
.gridview-item {
position: relative;
float: left;
padding: 20px 10px;
width:50%;
box-sizing: border-box;
}
.gridview-item: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);
}
.gridview-item: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);
}
.gridview-item:active {
background-color: #ECECEC;
}
.gridview-item__bg {
position: relative;
float: left;
padding: 0px 0px;
width: 100%;
box-sizing: border-box;
display:flex;
align-items: center;
justify-content: center;
}
.gridview-item__txt{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-color:#222;
background:#80CBC4;
margin:10px;
}
/* 两列列表样式 end */
不难发现,在gridview-item样式中有 width:50%; 这样一句,这句是控制列数的,譬如三列就可以将width的值改为33.3333%,以此类推,你就可以得到你想要的多列列表啦~