Transporter -- Weex 踩坑日记 (二)

固定footer的实现

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



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

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

总结

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

你可能感兴趣的:(weex,vue.js,flex)