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')
      }
    
    })
    
  • 相关阅读:
    bzoj4152-[AMPPZ2014]The_Captain
    bzoj3209-花神的数论题
    [模板] 数位dp
    [西安交大附中集训] 自积
    [模板] 后缀数组
    [模板] 哈希表
    [西安交大附中集训] d6 删边(cip)
    java 发布订阅
    Spring Boot使用@Async实现异步调用:自定义线程池
    上传文件到服务器或者直接输出到输出流
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701406.html
Copyright © 2011-2022 走看看