做網站價格歡迎光臨易企網站建設公司
當前位置:易企網站建設公司 >> 做網站 >> 做網站價格 >> 瀏覽文章

Flex 實現表格布局 微信小程序

發布時間:2017年10月06日 文章標簽:實現,表格,布局,程序 瀏覽4117

  微信小程序本身開發了一套 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;

  }

  來源:微信小程序聯盟

上一篇:在微信小程序的JS腳本中使用Promise來優化函數處理
下一篇:微信小程序重磅升級搜索快捷進入
點擊數:  相關搜索:實現 表格 布局 程序
现代战争送彩金