微信小程序实现一个简单的表格

简介: 微信小程序实现一个简单的表格

wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th">SPB</view>
    <view class="th">DPB</view>
    <view class="th ">日期</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.date}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.date}}</view>
    </view>
  </block>
</view>

wxss

.table {
  border: 0px solid darkgray;
  font-size: 12px;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 2rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 2rem;
  align-items: center;
}

js

Page({
  data: {
    listData: [
      { "code": "120", "text": "70", "date": "2018年4月19日" },
      { "code": "125", "text": "74", "date": "2018年4月17日" },
      { "code": "119", "text": "76", "date": "2018年4月16日" },
      { "code": "117", "text": "78", "date": "2018年4月15日" }
    ]
  },
  onLoad: function () {
    console.log('onLoad')
  }
})
相关文章
|
6月前
|
小程序
微信小程序手写table表格
微信小程序手写table表格
|
12月前
|
小程序 JavaScript
小程序实现竖行布局视图(类表格)
小程序实现竖行布局视图(类表格)
94 0
|
存储 小程序 JavaScript
小程序读取excel表格数据,并存储到云数据库
小程序读取excel表格数据,并存储到云数据库
433 0
|
小程序 前端开发 JavaScript
小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算
小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算
226 0
|
存储 数据处理 开发工具
微信小游戏开发实战2-使用表格处理数据
本篇内容包括微信小游戏开发工具中的表格的使用。重点学习表格中的数据的设置,遍历和查找操作,以及如何使用“调试场景”来验证游戏中的逻辑是否正确。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
119 0
|
小程序 API 数据库
小程序中读取腾讯文档的表格数据
小程序中读取腾讯文档的表格数据
小程序中读取腾讯文档的表格数据
|
存储 数据处理
微信小游戏开发实战2-使用表格处理数据
上一节中讲过使用表格来存储和处理游戏中的数据。这一节我们直接上手,学习表格中的数据处理,我们将会实现以下的内容: 创建一个10行10列(10x10)的表格,默认值都设置为0 随机的在表格中插入一行数据1 逐行遍历,找到满足条件的行(即整行的数据都是1)
149 0
微信小游戏开发实战2-使用表格处理数据
|
JSON 移动开发 小程序
你期待的微信小程序表格组件来啦
背景: 在做H5开发中表格table是最常见的标签,如此好用的标签在微信小程序中却没有
|
19天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
276 7
|
19天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
376 1