uniapp微信小程序获取up-tabbar高度

uniapp yekong

uniapp微信小程序开发中,多个页面通过tabbar来进行切换,因为涉及到页面滚动,这里需要获取tabbar高度,以更精确的控制滚动。

uniapp微信小程序获取up-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();
	});
},
喜欢