Weex：页面在网络中显示正确但在 iOS 设备中显示不正确

Question

我用weex启动一个项目，login.vue是这样的：

<template>
  <div class="login">
    <div class="images">1
    </div>
    <div class="centerPart">2
    </div>
    <div class="agree">3</div>
  </div>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.login :first-child{
  height: 250px;
}
.login :last-child{
  height: 200px;
}
.images {
  flex: 0 0 auto;
  background-color: aqua;
}
.centerPart{
  flex: 1 0 auto;
  background-color: yellow;
}
.agree {
  flex: 0 0 auto;
  background-color: coral;
}
</style>

<script>

</script>

当我运行 npm start 时，它在浏览器中显示了我想要的内容：

然而，当我运行weex run ios时，模拟器显示一个空白页面：

我也在设备上试了一下，也是显示空白页

所以只是想知道为什么它在模拟器中是空白的，我怎样才能找出原因？

Answer 1

Weex 还不支持完整的 flex shorthand 语法。您只能指定 flex-grow 部分。

在您的示例中，在 .centerPart 中使用 flex: 1;，它应该调整其高度。

Answer 2

也许你可以尝试在你的风格中添加这个

width: 750px;
flex: 1;

750px是所有设备的宽度，weex默认使用flex布局

Weex：页面在网络中显示正确但在 iOS 设备中显示不正确

Weex: page show correct in web but incorrect in iOS device

ios

flexbox

weex