小程序之实现表格展示数据
原创小程序之实现表格展示数据
原创
安德玛
发布于 2022-03-07 21:39:15
发布于 2022-03-07 21:39:15
前言
由于小程序组件一般是没有表格插件的，所以只能利用页面配合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的样子，往往伟大的算法都来源于对最底层的思考！而且我们无线捧吹的好用插件组件底层大部分都是我们认为的“笨办法”来实现的！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读