小程序之实现表格展示数据

前言

由于小程序组件一般是没有表格插件的,所以只能利用页面配合wxss强行自己写一个了

实现步骤
wxml中代码

1、先写表头

<view class="tr bg-w">
 <view class="th">姓名</view>
 <view class="th">电话</view>
 <view class="th ">所属部门</view>
 <view class="th ">注册时间</view>
</view>

2、为了区分表格的每一行数据,我们分奇数偶数行进行不同的颜色显示

  <view class="td">{{item.username}}</view>
  	<view class="td">{{item.phone}}</view>
  	<view class="td">{{item.deptname?item.deptname:''}}</view>
  	<view class="td">{{item.t}}</view>
  </view>
   <view class="tr bg-e" wx:else bindtap="gotoTaachieve" data-id="{{item.id}}">
   	<view class="td">{{item.username}}</view>
   	<view class="td">{{item.phone}}</view>
   	<view class="td">{{item.deptname?item.deptname:''}}</view>
   	<view class="td">{{item.t}}</view>
   </view>
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;
  font-size: 12px;
 }
 .bg-w{
  background: snow;
 }
 .bg-g{
  background: #E6F3F9;
 }
 .bg-e{
  background: #c7ccce;
 }
 .th {
  width: 40%;
  justify-content: center;
  background: #E1B368;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
  font-size: 13px;
 }
效果展示

在这里插入图片描述

总结

当我们习惯了用组件之后会形成一个很奇怪的想法,就是代码总是总是有最最优雅最最简约最最简单的逻辑就可以实现!这种想法是对的,但是有时候不要因为这种想法而限制了我们的逻辑,不要一味的追求所谓的算法而忽视了我们最初学代码if if if while while的样子,往往伟大的算法都来源于对最底层的思考!而且我们无线捧吹的好用插件组件底层大部分都是我们认为的“笨办法”来实现的!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值