获取小程序自定义导航高度的操作

最新推荐文章于 2024-08-30 12:35:52 发布

cccqd

最新推荐文章于 2024-08-30 12:35:52 发布

阅读量514

点赞数

文章标签：小程序 javascript vue.js

本文链接：https://blog.csdn.net/cccqd/article/details/125086938

版权

本文介绍了如何在小程序中获取并设置自定义导航栏的高度。通过在app.js中添加相应代码，并结合CSS应用，实现对导航栏样式的调整，确保组件正确引用。

摘要由CSDN通过智能技术生成

上代码记录一下,首先如要在app.js里面添加

// app.js
App({
    globalData: {
        stateheight: 0, //手机状态栏高度
        navhegiht: 0, //导航栏高度
        customheight: 0, //自定以导航栏高度
    },
    onLaunch() {
        // 获取手机状态栏信息和高度
        const phoneinfo = wx.getSystemInfoSync()
        const stateheight = phoneinfo.statusBarHeight
        // 获取胶囊按钮的信息
        const button = wx.getMenuButtonBoundingClientRect()
        // 获取导航栏高度
        const navhegiht = button.height + (button.top - stateheight) * 2
        // 计算自定义导航栏高度
        const customheight = navhegiht + stateheight
        // 赋值
        this.globalData.stateheight = stateheight //给对象globalData里面的变量stateheight赋值
        this.globalData.navhegiht = navhegiht //给对象globalData里面的变量navhegiht赋值
        this.globalData.customheight = customheight //给对象globalData里面的变量customheight赋值
    }
})

其他组件引用