使用flex布局，自制微信表格

因为要做一个表格展示的微信小程序展示页面，在翻查微信小程序的原生文档时，发现并没有，查百度，搜博客，并没有找到自己想要的，于是，我不得不苦哈哈的写一个表格，秉着分享快乐的原则，分享一下

效果如下：

竖屏：

横屏：

上代码：

wxml

<view class="shelves">
  <view class="title">
    <view class="num">
      <text>序号：</text>
      <text>1</text>
    </view>
    <view class="shNum">
      <text>货架号：</text>
      <text>1</text>
    </view>
  </view>
  <view class="content">
    <view class="head">
      <text>品名</text>
      <text>种类</text>
      <text>存放量</text>
      <text>可用量</text>
      <text>借出量</text>
      <text>新品</text>
      <text>备注</text>
    </view>
    <view class="data-content">
      <text>打印机</text>
      <text>办公</text>
      <text>198</text>
      <text>50</text>
      <text>0</text>
      <text>148</text>
      <text>无</text>
    </view>
  </view>
</view>

wxss

/* 货架展示 author：ahf time：2020/03/29 */

.shelves {
  margin: 10rpx;
}

.title {
  display: flex;
  justify-content: center;
  border: 1rpx solid #ccc;
}

.title .num {
  border-right: 1rpx solid #ccc;
  width: 0;
  flex: 1;
  text-align: center;
}

.title .shNum {
  width: 0;
  flex: 1;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  border-left: 1rpx solid #ccc;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}

.content .head {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}

.content .head text {
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #ccc;
  flex: 1;
}

.content .head text:first-child {
  flex: 4;
}

.content .head text:nth-child(1) {
  flex: 2;
}

.content .data-content {
  display: flex;
}

.content .data-content text {
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #ccc;
  flex: 1;
}

.content .data-content text:first-child {
  flex: 4;
}

.content .data-content text:nth-child(1) {
  flex: 2;
}

如果你的微信小程序想要强制横屏，你需要：

"pageOrientation": "landscape"
<mark>因为在微信小程序中，页面的json配置，不需要向app.json一样，加上window，而是直接写进去即可！</mark>

一个十分基础的表单，仅供大家参考

欢迎大家相互交流！！！