详细问题描述
uni.createSelectorQuery().in(this).select(‘’).boundingClientRect()可以计算出固定写死的高度，但是不能计算出动态计算出来的高度
重现步骤
[步骤]
页面有一个swiper，高度是动态计算出来的，
<swiper :style="{height: swiperHeight + 'px'}"></swiper>
this.swiperHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(200)
console.log('swiperHeight', this.swiperHeight) // 这里打印出来的是602
uni.createSelectorQuery().in(this).select('#test').boundingClientRect(data => {
console.log(data.height) // 这里打印出来的是150
}).exec();
[结果]
uni.createSelectorQuery().in(this).select('#test').boundingClientRect(data => {
console.log(data.height) //结果打印出来的是150
}).exec();
[期望]
uni.createSelectorQuery().in(this).select('#test').boundingClientRect(data => {
console.log(data.height) //期望打印出来的是602
}).exec();
IDE运行环境说明
HBuilderX
[IDE版本号]
windows10
uni-app运行环境说明
h5、微信小程序、安卓
App运行环境说明
附件
完整代码
<template>
<view class="index-content">
<view class="content-list">
<swiper id="test" :style="{height: swiperHeight + 'px'}">
<swiper-item item-id="item0">
<view class="swiper-item">1</view>
</swiper-item>
<swiper-item item-id="item1">
<scroll-view>
<view class="swiper-item">2</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperHeight: '',
}
},
mounted() {
this.swiperHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(200)
console.log('swiperHeight', this.swiperHeight)
uni.createSelectorQuery().in(this).select('#test').boundingClientRect(data => {
console.log(data)
}).exec();
}
}
</script>
<style scoped lang="stylus">
</style>
联系方式
codingliang@gmail.com
[QQ]1026626960
