微信小程序 WeChat app
当前位置:首页 > 网站建设专题 > 微信小程序
Flex 实现表格布局 (微信小程序)
发布日期:2017-09-06 阅读次数:1165 字体大小:

  微信小程序自己开发了一套 wxml + wxss,对许多 HTML 标签和 CSS 属性不支持。

  不支持 table 标签,推荐使用 flex 布局。

  自然而然的想法:flex 嵌套,效果还不错,贴代码如下:

  <view id="panel" class="flex-column">

  <view class="flex-cell flex-row">

  <text class="flex-cell flex-row">1</text>

  <text class="flex-cell flex-row">2</text>

  <text class="flex-cell flex-row">3</text>

  <text class="flex-cell flex-row">4</text>

  </view>

  <view class="flex-row flex-cell">

  <text class="flex-cell flex-row">1</text>

  <text class="flex-cell flex-row">2</text>

  <text class="flex-cell flex-row">3</text>

  <text class="flex-cell flex-row">4</text>

  </view>

  <view class="flex-row flex-cell">

  <text class="flex-cell flex-row">1</text>

  <text class="flex-cell flex-row">2</text>

  <text class="flex-cell flex-row">3</text>

  <text class="flex-cell flex-row">4</text>

  </view>

  <view class="flex-row flex-cell">

  <text class="flex-cell flex-row">1</text>

  <text class="flex-cell flex-row">2</text>

  <text class="flex-cell flex-row">3</text>

  <text class="flex-cell flex-row">4</text>

  </view>

  <view class="flex-row flex-cell">

  <text class="flex-cell flex-row">1</text>

  <text class="flex-cell flex-row">2</text>

  <text class="flex-cell flex-row">3</text>

  <text class="flex-cell flex-row">4</text>

  </view>

  </view>

  #panel{

  height:65vh;

  background:#fff;

  }

  #panel text{

  line-height: 13vh;

  border-right: 1rpx solid #ddd;

  border-bottom: 1rpx solid #ddd;

  }

  .flex-row{

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  }

  .flex-column{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: stretch;

  }

  .flex-cell{

  flex: 1;

  }

  来源:微信小程序联盟