uniapp微信小程序开发中,多个页面通过tabbar来进行切换,因为涉及到页面滚动,这里需要获取tabbar高度,以更精确的控制滚动。
直接获取up-tabbar可能获取不到,我们可以用div将up-tabbar包起来,然后获取这个div的高度。
<div id="tabbar">
<up-tabbar ref="tabbar" :value="currentTab" @change="handleTabChange" :fixed="true" :placeholder="true"
activeColor='rgba(26, 26, 26, 1)' inactiveColor='rgba(118, 118, 118, 1)' :safeAreaInsetBottom="true">
<up-tabbar-item v-for="item in tabItems" :key="item.text" :text="item.text"
:icon="getIconPath(item, currentTab)" @click="handleClick"
:class="{ 'tab-active': currentTab === item.text }" class="tab-item"></up-tabbar-item>
</up-tabbar>
</div>
获取高度
getTabbarHeight() {
this.$nextTick(() => {
const query = uni.createSelectorQuery();
query.select('#tabbar').boundingClientRect(rect => {
if (rect) {
this.tabbarHeight = rect.height
console.log('Tabbar height:', rect.height);
}
}).exec();
});
},