zoukankan      html  css  js  c++  java
  • 微信小程序实现一个简单的表格

    图片.png

    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')
      }
    
    })
    
  • 相关阅读:
    免费馅饼(HDU 1176 DP)
    搬寝室(HDU 1421 DP)
    FatMouse's Speed(HDU LIS)
    Bone Collector II(HDU 2639 DP)
    Palindrome(POJ 1159 DP)
    Proud Merchants(POJ 3466 01背包+排序)
    树的最大独立集
    Roads in the North(POJ 2631 DFS)
    Starship Troopers(HDU 1011 树形DP)
    Strategic game(POJ 1463 树形DP)
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701406.html
Copyright © 2011-2022 走看看