微信小程序表格布局

前端之家收集整理的这篇文章主要介绍了微信小程序表格布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序表格布局

微信小程序wxml + wxss,对许多 HTML 标签和 CSS 属性不支持不支持 table 标签,推荐使用 flex 布局。自然而然的想法:flex 嵌套,效果还不错,贴代码如下


1.wxml 

  1. 2.wxss文件

  2. #panel{
  3.   height:65vh;
  4.   background:#fff;
  5. }
  6. #panel text{
  7.   line-height: 13vh;
  8.   border-right: 1rpx solid #ddd;
  9.   border-bottom: 1rpx solid #ddd;
  10. }
  11. .flex-row{
  12.   display: flex;
  13.   flex-direction: row;
  14.   justify-content: center;
  15.   align-items: center;
  16. }
  17. .flex-column{
  18.   display: flex;
  19.   flex-direction: column;
  20.   justify-content: center;
  21.   align-items: stretch;
  22. }
  23. .flex-cell{
  24.   flex: 1;
  25. }
  26. 结果如下图片

  27. 微信小程序表格布局" alt="TIM截图20170828183823.jpg">

猜你在找的微信小程序相关文章