小程序里，如何让组件最外层的view的高度自适应？

Question

在小程序的项目里，想做一个重用的view，用组件去实现，里面的高度想在用的时候指定，应该怎么写？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
component.wxml

<view class="container">
    <view class="v1" style="height:20%"> </view>
    <view class="v1" style="height:30%"> </view>
    <view class="v1" style="height:30%"> </view>
    <view class="v1" style="height:20%"> </view>
</view>

index.wxml

<view>
    <componentView style="height: 120rpx">
        
    </componentView>
</view>

你期待的结果是什么？实际看到的错误信息又是什么？

结果不是高度为0， 就是子view的比例出不来。

求解？！

Answer 1

• component.wxml

<view class="container" style="height:{{componentHeight}}">
    <view class="v1" style="height:20%"> </view>
    <view class="v1" style="height:30%"> </view>
    <view class="v1" style="height:30%"> </view>
    <view class="v1" style="height:20%"> </view>
</view>

• component.js

Component({
    properties: {
        componentHeight: {
            type: String,
            value: '120rpx'
        }
    }
});

• index.wxml

<view>
    <componentView component-height="120rpx"></componentView>
</view>

小程序的组件还是不熟啊，建议多看看文档
component文档