微信小程序开发 --1.1表头导航栏

原生导航栏

json文件中可以使用以下语法来控制原生导航栏

"usingComponents": {"navBar": "/components/navBar/navBar"},//引入组件

"navigationBarTitleText": "" ,//设置导航栏标题

"navigationBarBackgroundColor" : "#A6AEDF",//设置导航栏背景颜色

"navigationBarTextStyle":"white",//设置导航栏标题颜色（只能设置黑或白两种）

注意：用逗号分隔，但是最后一行的末尾不能加逗号。

原生导航栏的限制：

1.能改动的属性有限

2.原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮

自定义导航栏

.json文件中使用以下语句设置自定义导航栏。

"navigationStyle": "custom"

1.状态栏

状态栏就是手机最顶部显示时间、信号、电量等信息的区域。

 2.顶部导航栏

顶部导航栏（蓝）的高度=状态栏高度（红）+(胶囊按钮top值-状态栏高度（红）)*2+胶囊按钮高度。

 效果

 1.app.json添加全局组件

"usingComponents": {
    "navBar": "/components/navBar/navBar"
},

2、app.js中 onLaunch方法中 添加该段代码

        const { statusBarHeight, platform } = wx.getSystemInfoSync()
        const { top, height } = wx.getMenuButtonBoundingClientRect()
        // 状态栏高度
        wx.setStorageSync('statusBarHeight', statusBarHeight)
        // 胶囊按钮高度 一般是32 如果获取不到就使用32
        wx.setStorageSync('menuButtonHeight', height ? height : 32)
        // 判断胶囊按钮信息是否成功获取
        if (top && top !== 0 && height && height !== 0) {
            const navigationBarHeight = (top - statusBarHeight) * 2 + height
            // 导航栏高度
            wx.setStorageSync('navigationBarTop', (top - statusBarHeight)*2)
            wx.setStorageSync('navigationBarHeight', navigationBarHeight)
        } else {
            wx.setStorageSync(
            'navigationBarHeight',
            platform === 'android' ? 48 : 40
            )
        }

3、对应页面

wxml

//导航栏
<view class="flex" style="z-index:10;position:fixed;top:0;width:100%;height:{{navigationBarAndStatusBarHeight}}px;background-color:#A5AEDF;color:#fff;">
    <text style="position:absolute;margin-left:312rpx;font-size:30rpx;letter-spacing:2rpx;height:auto;bottom:{{navigationBarTop}}px;">精彩活动</text>
</view>
//主体内容
<view style="padding-top:{{navigationBarAndStatusBarHeight}}px;min-height:{{mainPageHeight}}px;">
</view>

js

getDeviceInfo(){
        var windowInfo =  wx.getWindowInfo()//基础库大于2.20.1才能使用
        var windowHeight = windowInfo['windowHeight']//获取屏幕高度   
        var windowWidth =  windowInfo['windowWidth'] //获取屏幕宽度
        var rpxRate =   windowWidth / 750                  
        var upperZoneHeightRpx = wx.getStorageSync('statusBarHeight')+wx.getStorageSync('navigationBarHeight')    
        var mainPageHeight =   windowHeight -  (upperZoneHeightRpx  * rpxRate)//计算除去导航栏的屏幕高度   
        this.setData({
            windowHeight:windowHeight,
            mainPageHeight:mainPageHeight,
            navigationBarHeight:wx.getStorageSync('navigationBarHeight'),
            navigationBarTop:wx.getStorageSync('navigationBarTop'),
         navigationBarAndStatusBarHeight:wx.getStorageSync('statusBarHeight')+wx.getStorageSync('navigationBarHeight'),//状态栏高度
            menuButtonHeight:wx.getStorageSync('menuButtonHeight')
        })     
} ,

改变胶囊体颜色

js

wx.setNavigationBarColor({
      frontColor: '#fff',
      backgroundColor: '#000000',
    });

注意：frontColor、backgroundColor两个都需要设置