微信小程序多列列表 类似Android的GridView

微信官方文档提供的列表只能单列显示，类似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%，以此类推，你就可以得到你想要的多列列表啦～

本文参考：https://blog.csdn.net/mapboo/article/details/79303524

来源：CSDN

作者：大白大白大白

链接：https://blog.csdn.net/qq_28026283/article/details/80995939