场景:
swiper 组件,swiper 需要设置高度,不能设置同样高度,有的swiper-item的高度可能不需要那么高,有的又需要那么高,所以不同swiper-item内容不同,需要渲染出来的高度不同;
<swiper class="swiper" :style="{ height: `${swiperHeight}px` }" circular :current="tabItem" @change="changeTab">
<swiper-item>
<view class="tab-swiper-item">
<!-- 内容1 -->
</view>
</swiper-item>
<swiper-item>
<view class="tab-swiper-item">
<!-- 内容2 -->
</view>
</swiper-item>
</swiper>
data() {
return {
tabItem: 0,
swiperHeight: 0,
}
}
// 动态获取swiper的高度
setSwiperHeight() {
this.$nextTick(() => {
let element = '.tab-swiper-item'
// 通过uni api 获取对应dom节点内容的高度,然后赋值给swiper
let query = uni.createSelectorQuery().in(this)
// 多个的话使用selectAll,在回调函数里面获取当前的swiper下标的高度赋值给swiper
query.selectAll(element).boundingClientRect()
query.exec((res) => {
if (res && res[0]) {
// tabItem swiper 的下标
this.swiperHeight = res[0][this.tabItem].height
}
})
})
}
说明
亲测有效