zoukankan      html  css  js  c++  java
  • 微信小程序--简易table表格

    table.wxml

    <view class="table">
      <view class="tr bg-w">
        <view class="th">head1</view>
        <view class="th">head2</view>
        <view class="th ">head3</view>
      </view>
      <block wx:for="{{listData}}" wx:key="{{code}}">
        <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>
        <view class="tr" wx:else>
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>
      </block>
    </view>

    table.wxss

    .table {
      border: 0px solid darkgray;
    }
    .tr {
      display: flex;
       100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td {
        40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
       40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }

    table.js

    Page({
      data: {
        listData:[
          {"code":"01","text":"text1","type":"type1"},
          {"code":"02","text":"text2","type":"type2"},
          {"code":"03","text":"text3","type":"type3"},
          {"code":"04","text":"text4","type":"type4"},
          {"code":"05","text":"text5","type":"type5"},
          {"code":"06","text":"text6","type":"type6"},
          {"code":"07","text":"text7","type":"type7"}
        ]
      },
      onLoad: function () {
        console.log('onLoad') 
      }
    
    })
    今日事今日毕
  • 相关阅读:
    增加增删改查按钮
    基于.net创建一份报表模块
    bootstrap 三层设计
    DI 依赖注入之StructureMap框架
    unit vs2017基于nunit framework创建单元测试
    Oracle彻底卸载
    sql 统计常用的sql
    Webserver asp配置及伪静态设置
    MVC ASP.NET MVC5使用Area区域
    VS 发布MVC网站缺少视图解决方案
  • 原文地址:https://www.cnblogs.com/gjack/p/7440968.html
Copyright © 2011-2022 走看看