微信小程序父组件设置的样式对子组件无效

Dear 丶 2022-11-15 14:06 491阅读 0赞

比如父组件设置了flex布局，子组件需要占满剩下的部分。

  1. <!-- 父组件 -->
  2. <view class="main">
  3.   <view class="top"></view>
  4.   <child></child>
  5. </view>
  6. page {
  7.   width: 100%;
  8.   height: 100%;
  10.   .main {
  11.     width: 100%;
  12.     height: 100%;
  13.     background: yellow;
  14.     display: flex;
  15.     flex-direction: column;
  16.     .top {
  17.       width: 100%;
  18.       height: 300rpx;
  19.       background: red;
  20.     }
  21.   }
  22. }
  24. <!-- 子组件 -->
  25. <view class="child"></view>
  26. .child {
  27.   flex: 1;
  28.   background: blue;
  29. }

会出现这种情况：
在这里插入图片描述

解决方法

  3. // 子组件
    Component({
    options: { 

    1. virtualHost: true

    }
    })

效果

在这里插入图片描述

参考文档：
组件模板和样式 | 微信开放文档

发表评论

表情：
评论列表 （有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序 - 组件

    > 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。 一、基础组件 > 基础组件主要分为：视图容

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 715 阅读