Transporter -- Weex 踩坑日記 (二)

固定footer的實現

Weex默認爲flex佈局且只支持flex佈局。使用flex佈局實現footer固定在底部。這裏參考菜鳥教程上的文章Flex 佈局語法教程來實現。

<template>
  <div class="wrapper">
    <div class="tab-container">
      <text>main</text>
    </div>
    <div class="footer">
      <text>footer</text>
    </div>
    </div>
</template>

<style scoped>
.wrapper {
  background-color: azure;
  flex-direction: column;
  width: 750px;
}

.tab-container {
  background-color: beige;
  width: 750px;
  flex: 1;
}

.footer {
  background-color: rgba(255, 255, 0, 1);
  width: 750px;
  height: 100px;
  flex: 0;
  border-radius: 10px 10px 0 0;
  padding: 5px 5px 5px 5px;
}

</style>

這裏的重點在於wrapper中flex-direction:column設置flex排布方向。主頁面tab-container中設置flex:1且footer中設置flex:0來使得tab-container能夠自動填滿空白而footer固定大小。
這裏面踩的坑主要有：

• weex貌似不支持相似div.footer這種選擇器
• weex不支持flex: <flex-grow> | <flex-shrink> | <'flex-basis>的簡寫。且不支持flex-shrink 和 flex-basis 屬性。
• weex不支持百分比佈局，也就是說相似width:100%這樣設置寬度只在web頁面上有效，而在Android端無效。weex默認使用750px做爲屏幕的寬度，任何大小的設置都按750px來等比換算。例如，width:50%等價於width:375px。

總結

weex對css的支持有限，本來在web端適用的方案在weex中不必定適用。對weex文檔熟悉的話能夠必定程度上避免不少問題。所以出現問題後優先查閱其文檔。