小程序中的header适配

header组件的适配

app.js

// app.js
App({
    onLaunch() {
        // 展示本地存储能力
        const logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)

        // 登录
        wx.login({
            success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
            }
        })

        /* 
          onLaunch:已进入页面就会执行的
        */
        // 获取当前的系统信息
        wx.getSystemInfo({
            success: (result) => {
                // 获取当前设备状态栏
                console.log(result);
                // 获取全局数据
                // console.log(this.globalData.headerHeight);
                // 求出适配的header高度的公式
                // header高=当前设备状态栏高*（750/当前设备窗口宽）+88(导航栏的高度)
                this.globalData.headerHeight = result.statusBarHeight * (750 / result.windowWidth) + 88;
                // 修改globalData中的winHeight
                this.globalData.winHeight = result.windowHeight;
            },
        })

    },
    globalData: {
        userInfo: null,
        headerHeight: 0, //定义header组件的高度数据
        winHeight: 0,
    }
})

获取app.js中的全局数据

let app = getApp(); //获取整个小程序实例

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 获取navH
        this.setData({
            navH: app.globalData.headerHeight,
            winHeight: app.globalData.winHeight
        })
    },

再在视图中把行内样式高度设置为navH

style="height: {{navH}}rpx;"