微信小程序上实现 表格

微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下。

table.wxml


   
  1. <view class="table">
  2. <view class="tr bg-w">
  3. <view class="th">head1 </view>
  4. <view class="th">head2 </view>
  5. <view class="th ">head3 </view>
  6. </view>
  7. <block wx:for="{{listData}}" wx:key="{{code}}">
  8. <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
  9. <view class="td">{{item.code}} </view>
  10. <view class="td">{{item.text}} </view>
  11. <view class="td">{{item.type}} </view>
  12. </view>
  13. <view class="tr" wx:else>
  14. <view class="td">{{item.code}} </view>
  15. <view class="td">{{item.text}} </view>
  16. <view class="td">{{item.type}} </view>
  17. </view>
  18. </block>
  19. </view>

table.wxss


   
  1. .table {
  2. border: 0px solid darkgray;
  3. }
  4. .tr {
  5. display: flex;
  6. width: 100%;
  7. justify-content: center;
  8. height: 3rem;
  9. align-items: center;
  10. }
  11. .td {
  12. width:40%;
  13. justify-content: center;
  14. text-align: center;
  15. }
  16. .bg-w{
  17. background: snow;
  18. }
  19. .bg-g{
  20. background: #E6F3F9;
  21. }
  22. .th {
  23. width: 40%;
  24. justify-content: center;
  25. background: #3366FF;
  26. color: #fff;
  27. display: flex;
  28. height: 3rem;
  29. align-items: center;
  30. }

table.js


   
  1. Page({
  2. data: {
  3. listData:[
  4. {"code":"01","text":"text1","type":"type1"},
  5. {"code":"02","text":"text2","type":"type2"},
  6. {"code":"03","text":"text3","type":"type3"},
  7. {"code":"04","text":"text4","type":"type4"},
  8. {"code":"05","text":"text5","type":"type5"},
  9. {"code":"06","text":"text6","type":"type6"},
  10. {"code":"07","text":"text7","type":"type7"}
  11. ]
  12. },
  13. onLoad: function () {
  14. console.log('onLoad')
  15. }
  16. })

效果图


原文地址: https://blog.csdn.net/MoDingXiao/article/details/54694730

  • 0
    点赞
  • 2
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值