问题描述
使用weex创建了工程,然后修改了页面,页面有三个div组成,npm start
在浏览器中能显示出内容,但是在iOS模拟器和真机上显示空白
问题出现的环境背景及自己尝试过哪些方法
环境:
- iOS 12.0
- weex 0.18.0
相关代码
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>
你期待的结果是什么?实际看到的错误信息又是什么?
在浏览器中显示如下并且是我预想的样子:
但是在iOS模拟器和真机上显示空白:
尝试的方法
- 试着将login div中的子元素都删除,可以显示红色;
- 保留子元素,试着设置login 的高度,但还是白色;
怀疑是flex导致的,但是不知道怎么解决。
估计是缓存之类的影响。
将platform下的内容都删除,然后重新生成 :
weex platform add ios
然后,模拟器上可以显示了。
另外注意flex的写法:
flex: number;