微信小程序自定义顶部栏

最新推荐文章于 2024-08-06 15:09:03 发布

LvJiaLei

最新推荐文章于 2024-08-06 15:09:03 发布

阅读量190

点赞数

分类专栏：小程序文章标签：微信小程序导航栏自定义组件状态栏高度布局计算

本文链接：https://blog.csdn.net/weixin_45614470/article/details/118191719

版权

小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中自定义导航栏，并通过wx.getSystemInfo获取状态栏高度，结合菜单按钮位置信息动态计算并设置导航栏的高度，确保在不同设备上显示效果一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先自定义导航栏。。。步骤省略。。。

<view class="top-bar" style="margin-top:{{navTop}}rpx;height:{{navHeight}}px">
    <text>首页</text>
</view>

注意navTop是rpx

wx.getSystemInfo({
            success(res) {
                let menuButtonObject = wx.getMenuButtonBoundingClientRect();
                let statusBarHeight = res.statusBarHeight,
                    navTop = menuButtonObject.top,
                    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
                that.setData({navHeight, navTop});
            }
        })