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')
      }
    
    })
    
  • 相关阅读:
    springboot整合mybatis
    nginx
    mysql安装
    oracle安装静默
    网卡
    kafak部署
    在docker环境下安装activemq和rabbitmq
    docker安装
    【1213工作日志】ZYNQ的中断应用
    【CAN总线】CAN总线总结
  • 原文地址:https://www.cnblogs.com/ting6/p/9725414.html
Copyright © 2011-2022 走看看