微信小程序制作横向增长表格

最新推荐文章于 2025-07-01 16:16:59 发布

reoak

最新推荐文章于 2025-07-01 16:16:59 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/reoak/article/details/81180398

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用WXML在小程序中展示数据的方法，通过定义表格样式和结构，实现了将数组中的数据以表格形式呈现的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <view class='table'>
    <view class='tr'>
      <view class='td' wx:for='{{array}}'>{{item.day}}</view>
    </view>
    <view class='tr'>
      <view class='td' wx:for='{{array}}'>{{item.number}}</view>
    </view>
  </view>

.table {
  font-size: 24rpx;
  margin-top: 50rpx;
  border-top: 1rpx solid #dadada;
  border-left: 1rpx solid #dadada;
}

.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.td {
  padding: 10rpx;
  border-bottom: 1rpx solid #dadada;
  border-right: 1rpx solid #dadada;
  text-align: center;
  width: 100%;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [{
  day: '7-24',
  number: 4
},
{
  day: '7-23',
  number: 32
}, 
{
  day: '7-22',
  number: 32
},
{
  day: '7-21',
  number: 25
},
{
  day: '7-20',
  number: 32
},
{
  day: '7-19',
  number: 33
},
{
  day: '7-18',
  number: 33
}]
  },