微信小程序自定义顶部导航组件

(记录一下)

1、在 page.json 中设置navigationStyle值为custom，可以使用自定义组件替代原生导航栏。

示例：

{
    "usingComponents": {
        "custom-nav": "../../components/customNav/customNav",
   
      },
   "navigationStyle": "custom"
}

其中胶囊颜色可通过.json 中配置

"navigationBarTextStyle":"black"

或

"navigationBarTextStyle":"white"

胶囊尺寸引用一张别人的截图

2、自定义顶部导航组件customNav：

wxml：

<view class="custom main-bg" style="padding-top:{{statusBarHeight}}px">
  <image class='nav_logo' src='/imgs/nav-logo.png'></image>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

js:

const app = getApp()
Page({
    data:{
        statusBarHeight:  app.globalData.statusBarHeight, // 状态栏高度
        elementHeight: ''
    },
    // 通过class name 获取页面其他节点的高度 （按需使用）
    getElementHeight(className){
        query.select(`.${className}`).boundingClientRect(rect=>{
            this.setData({
                elementHeight: rect.height;
            })
        }).exec();
    }
})