小程序获取自定义tabbar高度踩坑

本文主要是介绍小程序获取自定义tabbar高度踩坑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 在小程序中使用自定义tabbar后，页面page高度会包含自定义tabbar高度，为了方便页面布局，可以获取tabbar高度后，用calc(100% - {{tabbarHeight}})来计算。

坑点：发现用tdesign自定义tabbar组件后，小程序无法正确获取高度，经测试可以做如下修改：

1.custom-tab-bar/index.wxml，在tdesign组件外层添加view，并配置组件fixed为false，原因是自定义组件默认使用了fixed，会导致最外层的view没有高度，所以需要手动关闭，目的是为了正确获取到最外层view的高度：

<!--custom-tab-bar/index.wxml-->
<view class="tabbar-box"><t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}" fixed="{{false}}"><t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">{{item.label}}</t-tab-bar-item></t-tab-bar>
</view>

2.custom-tab-bar/index.scss，这里相当于将自定义组件中的fixed移到外层view上：

/* custom-tab-bar/index.wxss */
.tabbar-box {position: fixed;left: 0;bottom: 0;right: 0;
}

3.custom-tab-bar/index.ts，定义获取高度方法

methods: {// 获取高度getHeight() {let query = wx.createSelectorQuery().in(this);return new Promise((resolve: any) => {query.select('.tabbar-box').boundingClientRect(rects => {resolve(rects.height)}).exec();})}}

4.在pages/index/index.ts中调用方法：

// index.tsPage({data: {tabbarHeight: 0},onLoad() {},async onShow() {// 设置tabbar高亮if (typeof this.getTabBar === 'function' ) {this.getTabBar().setData({value: 0})// 获取自定义tabbar高度let tabbarHeight = await this.getTabBar().getHeight()this.setData({tabbarHeight})}},
})

5.在pages/index/index.wxml中使用即可，注意返回的tabbarHeight值的单位是px：

<view style="height: calc(100vh - {{tabbarHeight}}px);"></view>

这篇关于小程序获取自定义tabbar高度踩坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---