微信小程序父组件设置的样式对子组件无效
作者:互联网
比如父组件设置了flex布局,子组件需要占满剩下的部分。
<!-- 父组件 -->
<view class="main">
<view class="top"></view>
<child></child>
</view>
page {
width: 100%;
height: 100%;
.main {
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: column;
.top {
width: 100%;
height: 300rpx;
background: red;
}
}
}
<!-- 子组件 -->
<view class="child"></view>
.child {
flex: 1;
background: blue;
}
会出现这种情况:
解决方法
<child class="^main"></child>
<child class="~main"></child>
// 子组件
Component({
options: {
virtualHost: true
}
})
效果
参考文档:
组件模板和样式 | 微信开放文档
标签:flex,微信,100%,height,width,background,组件,对子 来源: https://blog.csdn.net/qq_39131699/article/details/115378598