<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'}"父盒子的高度