Transporter -- Weex 踩坑日记 (二)

固定footer的实现

Weex默认为flex布局且只支持flex布局。使用flex布局实现footer固定在底部。这里参考菜鸟教程上的文章Flex 布局语法教程来实现。

这里的重点在于wrapper中flex-direction:column设置flex排布方向。主页面tab-container中设置flex:1且footer中设置flex:0来使得tab-container可以自动填满空白而footer固定大小。
这里面踩的坑主要有：

• weex貌似不支持类似div.footer这种选择器
• weex不支持flex: | | <'flex-basis>的简写。且不支持flex-shrink 和 flex-basis 属性。
• weex不支持百分比布局，也就是说类似width:100%这样设置宽度只在web页面上有效，而在Android端无效。weex默认使用750px作为屏幕的宽度，任何大小的设置都按750px来等比换算。例如，width:50%等价于width:375px。

总结

weex对css的支持有限，原本在web端适用的方案在weex中不一定适用。对weex文档熟悉的话可以一定程度上避免很多问题。因此出现问题后优先查阅其文档。