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文档熟悉的话可以一定程度上避免很多问题。因此出现问题后优先查阅其文档。