【蓝牙小程序】实现简易table表格

合集 - 蓝牙小程序(9)

1.【蓝牙小程序】项目记录02-072.【蓝牙小程序】微信小程序子组件如何向父组件传递数据02-123.【蓝牙小程序】蓝牙微信小程序定制化的关键函数:设备名/服务/特征 & 注意事项02-184.【蓝牙小程序】微信小程序 "父组件"调用"子组件"的"方法函数"(method)02-185.【蓝牙小程序】微信小程序 ReferenceError:xxx is not defined 报错解决办法02-156.【蓝牙小程序】微信小程序中 arraybuffer 数据类型是什么？02-217.【蓝牙小程序】在微信小程序中使用 ECharts02-24

8.【蓝牙小程序】实现简易table表格02-23

9.【蓝牙小程序】如何让 bytearray 数据转变为 json 格式02-26

收起

Demo效果图

 

正文

由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下
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;
}

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

})

 

 

 

参考资料：

转载自：微信小程序----简易table表格

链接：https://blog.csdn.net/MoDingXiao/article/details/54694730

作者：oys1341

 

其他：

微信小程序表格组件(锁头、锁列、样式、字体颜色等)

https://blog.csdn.net/OneGLYF/article/details/136742671

微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、斑马线样式

https://blog.csdn.net/qq_44722452/article/details/136277840?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-136277840-blog-144831337.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-136277840-blog-144831337.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=1

微信小程序自定义表格样式

https://blog.csdn.net/weixin_43923808/article/details/144831337?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-3-144831337-blog-76922167.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-3-144831337-blog-76922167.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=6