微信小程序实现一个表格table

最新推荐文章于 2024-04-14 15:41:17 发布

LLL_LH

最新推荐文章于 2024-04-14 15:41:17 发布

阅读量8.2k

点赞数 3

分类专栏：微信

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/86699051

版权

微信专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1、wxml

<view class="table">
    <view class="tr thead">
      <view class="td">名字</view>
      <view class="td">名字</view>
      <view class="td ">名字</view>
      <view class="td">名字</view>
      <view class="td">名字</view>
      <view class="td ">名字</view>
      <view class="td">名字</view>
    </view>
    <block wx:for="{{list}}">
      <view class="tr">
        <view class="td">{{item.str}}</view>
        <view class="td">{{item.text}}</view>
        <view class="td">{{item.name}}</view>
        <view class="td">{{item.str}}</view>
        <view class="td">{{item.text}}</view>
        <view class="td">{{item.name}}</view>
        <view class="td">{{item.str}}</view>
      </view>
    </block>
  </view>

2、wxss


.table {
  border: 1px solid #ccc;
  font-size: 28rpx;
  background: #fff;
  border-right: none;
}

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

.td {
  text-align: center;
  border: 1px solid #ccc;
  display: inline-block;
  border-left: none;
  border-bottom: none;
  padding: 10rpx 1%;
  width: 12%;
}

.thead .td{
  border-top: none;
  height: 140rpx;
  line-height: 50rpx;
}

3、js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [
      { "str": "A", "text": "text1", "name": "name1" },
      { "str": "B", "text": "text2", "name": "name2" },
      { "str": "C", "text": "text3", "name": "name3" },
      { "str": "D", "text": "text4", "name": "name4" },
      { "str": "E", "text": "text5", "name": "name5" },
      { "str": "F", "text": "text6", "name": "name6" },
      { "str": "G", "text": "text7", "name": "name7" }
    ]

  },

})