微信小程序简单好看的表格
微信小程序目前没有 table 标签，需要用到表格，必须自己处理。想要一个简单的比较通用的表格，在网上没找到，综合了下找到的资料，根据bootstrap简单配色风格，自己简单处理了一个，希望对大家有帮助。
1.数据和样式
首先是数据
在.json中创建一个列表数据，大致如下：
Page({
/**
* 页面的初始数据
*/
data: {
listData: [
{
"col1": "第一列1", "col2": "第二列1", "col3": "第三列1" },
{
"col1": "第一列2", "col2": "第二列2", "col3": "第三列2" },
{
"col1": "第一列3", "col2": "第二列3", "col3": "第三列3" },
{
"col1": "第一列4", "col2": "第二列4", "col3": "第三列4" },
{
"col1": "第一列5", "col2": "第二列5", "col3": "第三列5" },
{
"col1": "第一列6", "col2": "第二列6", "col3": "第三列6" },
{
"col1": "第一列7", "col2": "第二列7", "col3": "第三列7" },
{
"col1": "第一列8", "col2": "第二列8", "col3": "第三列8" }
]
}
})
然后是样式
在.wxss中加入如下样式：
/*
分割线
*/
.divLine{
background: rgb(80, 80, 80);
width: 100%;
height: 5rpx;
margin-bottom: 20rpx;
}
/*
页面左右留白
*/
.pageSapce{
margin-left: 5%;
margin-right: 5%;
}
/*
表格纵向滑动条
*/
.table-wrap{
height: 400rpx;
overflow-y: scroll;
overflow-x: hidden;
}
/* 表格代码 */
.table {
border:1px solid #dddddd;
border-right:0;
border-bottom: 0;
width: 98%;
margin-left: 1%;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
width: 34%;
justify-content: center;
align-items: center;
color: #4f4f4f;
display: flex;
font-size: 25rpx;
height: 99%;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
/*
用于列表隔行的颜色变化
*/
.tdColor{
background:#f7f7f7;
}
/*
表头颜色
*/
.thColor{
background:#eff3f5;
}
.th {
width: 34%;
justify-content: center;
align-items: center;
color: #4f4f4f;
display: flex;
height: 99%;
font-weight: 600;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
2.带纵向滑动条的列表纯色简单表格
在.wxml中加入如下代码：
<view class="pageSapce">
<!--表格1-->
<text>带纵向滑动条的简单表格1</text>
<view class="divLine"></view>
<view class="table ">
<view class="tr thColor">
<view class="th">表头1</view>
<view class="th ">表头2</view>
<view class="th ">表头3</view>
</view>
<view class="table-wrap">
<block wx:for="{
{listData}}" wx:key="{
{code}}">
<view class="tr">
<view class="td">{
{item.col1}}</view>
<view class="td">{
{item.col2}}</view>
<view class="td">{
{item.col3}}</view>
</view>
</block>
</view>
</view>
</view>
效果如下图：
3.带纵向滑动条的列表间隔色简单表格
在.wxml中加入如下代码：
<view class="pageSapce">
<!--表格2-->
<text>带纵向滑动条的简单表格2</text>
<view class="divLine"></view>
<view class="table ">
<view class="tr thColor">
<view class="th">表头1</view>
<view class="th ">表头2</view>
<view class="th ">表头3</view>
</view>
<view class="table-wrap">
<block wx:for="{
{listData}}" wx:key="{
{code}}">
<view class="tr" wx:if="{
{index%2==0}}">
<view class="td">{
{item.col1}}</view>
<view class="td">{
{item.col2}}</view>
<view class="td">{
{item.col3}}</view>
</view>
<view class="tr tdColor" wx:else>
<view class="td">{
{item.col1}}</view>
<view class="td">{
{item.col2}}</view>
<view class="td">{
{item.col3}}</view>
</view>
</block>
</view>
</view>
</view>
加入wx:if判断产生间隔变色，变色引用新的简单样式：
用于列表隔行的颜色变化
*/
.tdColor{
background:#f7f7f7;
}
效果大致如下：
大致就是这样，下面附上源码连接：GitHub.