vue跟uniapp中动态设置父盒子的高度

  

 <view class="card" :class="{'flipped':flipped}" :style="{height:cardHeight+'px'}">
        <!-- 项目列表 -->
        <view class="front">
            <ProjectItem @check='check' ref="projectItemDom" class="projectItem" />
        </view>
        <!-- 户型列表2 -->
        <view class="back">
            <HosTypeItem @check="check" style="display: block;" />
        </view>
    </view>

<script>
    import ProjectItem from '@/pagesLeaseHouse/components/ProjectItem/index.vue'
    import HosTypeItem from '@/pagesLeaseHouse/components/HosTypeItem/index.vue'
    export default {
        components: { HosTypeItem, ProjectItem },
        mounted() {
            this.getHeight('.front')
            this.getHeight('.back')
        },
        computed: {
            cardHeight() {
                return this.flipped ? this.backHeigth : this.frontHeight
            }
        },
        data() {
            return {
                flipped: false,
                frontHeight: 0,
                backHeigth: 0
            }
        },
        methods: {
            check() {
                this.flipped = !this.flipped
            },
            getHeight(val) {
                const query = uni.createSelectorQuery();
                query.select(val).boundingClientRect((data) => {
                    val == '.front' ? this.frontHeight = data.height : this.backHeigth = data.height
                }).exec();
            }
        }
    }
</script>

card父盒子的高度没动态设置时自动为back小盒子的高度点击切换大盒子时父盒子card高度不够,通过 uni.createSelectorQuery()计算两个盒子的高度,运用computed计算属性来:style="{height:cardHeight+'px'}"父盒子的高度