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')
      }
    
    })
    
  • 相关阅读:
    线段树区间最大子段和
    NTT数论变换
    cdq分治·三维偏序问题
    线段树区间开方
    怎么联系$zcy$呢?
    题解 CF375D 【Tree and Queries】
    点分治模板
    Good Bye 2018题解
    Hello 2019题解
    Codeforces Round #525 (Div. 2)题解
  • 原文地址:https://www.cnblogs.com/ting6/p/9725414.html
Copyright © 2011-2022 走看看