微信小程序多列列表 类似Android的GridView
16lz
2021-01-26
微信官方文档提供的列表只能单列显示，类似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
更多相关文章
- Android(安卓)App 实现分享功能及将应用加入分享列表 (分享功能
- Android(安卓)之 下拉框(Spinner)的简单使用
- android studio Activity标题栏研究
- Android实现列表时间轴
- Android(安卓)ListView自定义和选中效果
- Android：布局实例之模仿微信Tab
- android4.4 launcher2实现应用列表背景透明
- Android(安卓)Studio Banner轮播图使用
- Android自定义ActionBar背景色、字体颜色等样式style