WeChat applet is a simple and beautiful spreadsheet

The WeChat applet currently does not have a table tag, so it needs to use tables and must handle them by itself. I want a simple and more general table, but I couldn't find it online. I combined the information I found and based on the simple color matching style of bootstrap, I simply processed one. I hope it will be helpful to everyone.

1. Data and styles

First is the data.
Create a list data in .json, roughly as follows:

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" }
    ]
  }
})

Then
add the following style to .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. List solid color simple table with vertical slider

Add the following code to .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>

The effect is as follows:

3. List interval color simple table with vertical slide bar

Add the following code to .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>

Add wx:if to determine the interval color change, and the color change refers to the new simple style:

用于列表隔行的颜色变化
*/
.tdColor{
    
    
  background:#f7f7f7;
}

The effect is roughly as follows:

This is roughly it. The source code link is attached below: GitHub .