设页面名为user

在页面的user.json配置文件中设置取消navigationBar

image-20220422092129095

自定义一个导航栏组件c-navigation-bar

自定义组件看个人情况，但导航栏的高度要在app.js进行获取并在user.js中使用const app=getApp()和app.globalData.navigationBarHeight来引用。

1
2
3
4
5
6
7
8
9
10
/*app.js*/

//单位px
        wx.getSystemInfo().then(res => {
            this.globalData.statusBarHeight = res.statusBarHeight //状态栏高度
            const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//胶囊栏位置信息
            this.globalData.navigationBarHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 + menuButtonInfo.height + res.statusBarHeight; //导航栏高度
        }).catch(err => {
            console.log(err)
        })

设置组件的样式

先在app.json中对组件全局引用，再在app.wxss中写样式。

1
2
3
4
5
6
/*app.wxss*/
/*导航栏位置固定*/
c-navigation-bar{
    position: fixed;/*保证位置总是固定不变*/
    z-index: 1;/*保证总是显示在第一层*/
}

在user.wxml文件中，将c-navigation-bar放在最前方。

1
2
3
4
<!--要设置导航栏的高度，其余内容要往下移动navigationBarHeight px-->
<c-navigation-bar height="{{navigationBarHeight}}"></c-navigation-bar>
<view style="{{'margin-top:'+navigationBarHeight+'px;'}}">
</view>