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;
      width: 100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
      width: 40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }

    th、td的宽度百分比建议根据项目需求自行调整

    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') 
      }
    
    })

    效果图如下:

  • 相关阅读:
    利用相关的Aware接口
    java 值传递和引用传递。
    权限控制框架Spring Security 和Shiro 的总结
    优秀代码养成
    Servlet 基础知识
    leetcode 501. Find Mode in Binary Search Tree
    leetcode 530. Minimum Absolute Difference in BST
    leetcode 543. Diameter of Binary Tree
    leetcode 551. Student Attendance Record I
    leetcode 563. Binary Tree Tilt
  • 原文地址:https://www.cnblogs.com/MirageFox/p/9381729.html
Copyright © 2011-2022 走看看