參考鏈接，第二個鏈接下滑時導航欄變白色好用微信小程序自定義navigationBar頂部導航欄，兼容適配所有機型（附完整案例）_小程序自定義導航欄-CSDN博客

?【微信小程序開發(fā)（二）】自定義導航欄_微信小程序分類導航欄-CSDN博客

一.創(chuàng)建navBar組件

1.components下創(chuàng)建navBar文件夾

?項目用到該組件的的頁面比較多，所以獲取高度寫到app.js

app.js

App({
   onLaunch(options) {
    const that = this;
    // 獲取系統(tǒng)信息
    const systemInfo = wx.getSystemInfoSync();
    // 膠囊按鈕位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 導航欄高度 = 狀態(tài)欄高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuTop = menuButtonInfo.top;
    that.globalData.menuHeight = menuButtonInfo.height;
  },
  // 數(shù)據(jù)都是根據(jù)當前機型進行計算，這樣的方式兼容大部分機器
  globalData: {
    userInfo: null,
    navBarHeight: 0, // 導航欄高度
    menuRight: 0, // 膠囊距右方間距（方保持左、右間距一致）
    menuTop: 0, // 膠囊距頂部間距
    menuHeight: 0, // 膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）
})

navBar可能代碼缺失，因為只貼主要代碼?

navBar.wxml

<!-- 自定義頂部欄 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;width: 100%;" class="{{backType=='login'?'backFFF':''}}">
  <view>
    <view style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;">
      <view wx:if="{{backType=='noBack'}}" class="bg-op2" ></view>
      <view wx:else class="bg-op" style="opacity:{{opacity}};"></view>
      <view style="position: absolute;top:{{menuTop}}px;" class="left-icon" bindtap="navigateBack">
        <image src="png" mode='widthFix'></image>
      </view>
      <view class="title" style="text-align:center;font-size: 28rpx;padding-top:{{menuTop}}px;">{{title}}</view>
      <view class="icon"></view>
    </view>
  </view>
</view>

navBar.js

// components/navBar/navBar.js
const app = getApp()
Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    backType: {
      type: String,
      value: ''
    },
    toBack: {
      type: String,
      value: ''
    },
    scrollTop: {
      type: String,
      value: '0',
      observer: 'update', // 類似于vue的 watch 動態(tài)傳值
    },
  },
  data: {
    opacity: 0,
    navBarHeight: app.globalData.navBarHeight,
    menuRight: app.globalData.menuRight,
    menuTop: app.globalData.menuTop,
    menuHeight: app.globalData.menuHeight,
  },
  attached: function () {

  },
  onPageScroll(t) {
    this.setData({
      scrollTop: t.scrollTop
    })
    console.log('scrollTop',this.data.scrollTop)
  },
  methods: {
    navigateBack: function () {
      if(this.data.toBack=='function'){
        wx.switchTab({
          url: ''
        })
      }else{
        wx.navigateBack({
          delta: 1,
        })
      }
    },
    update(newValue) {
      let op = 0;
      if (newValue != 0 && newValue <= 40) {
        op = newValue / 40
      }
      if (newValue >= 40) {
        op = 1;
      }
      this.setData({
        opacity: op
      })
    },
    parentClose: function () {
      debugger
      this.triggerEvent('parentClose');
    },

  }
})

navBar.wxss

/* component/navBar/navBar.wxss */
.nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  color: #fff;
  z-index: 9999;
}

.backFFF {
  background-color: #FFFFFF;
}

/* .nav-bar .search {
  width: 60%;
  color: #333;
  font-size: 14px;
  background: #fff;
  position: absolute;
  border-radius: 50px;
  background: #ddd;
  padding-left: 14px;
} */

/* 原始 */
.back-nav-bar {
  /* height: 64rpx; */
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  position: relative;
}

.bg-op {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  /* background: linear-gradient(180deg, #C1CFE5 0%, #DEE4EE 100%); */
  background: #FFFFFF;
  z-index: -1;
}

.bg-op2 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.left-icon {
  margin-left: 20rpx;
  padding-right: 50rpx;
}

.left-icon image {
  width: 20rpx;
  height: 38rpx;
  padding-top: 10rpx;
}

.left-icon2 {
  margin-left: 20rpx;
}

.left-icon2 image {
  width: 50rpx;
  height: 45rpx;
  padding-top: 6rpx;
}

.icon {
  width: 40rpx;
  height: 45rpx;
}

?navBar.json

{
  "component": true,
  "usingComponents": {}
}

二.隱藏原生的navigationBar

1.需要全局設為自定義。

app.json里面window全局配置里有個參數(shù)：navigationStyle（導航欄樣式），default=默認樣式，custom=自定義樣式。自定義需要配置為custom

"window": {
	"navigationStyle": "custom"
}

2.指定頁面設為自定義。

在需要使用自定義組件navBar的頁面的json文件里面，設置navigationStyle為custom,并且引入組件

{
  "component": true,
  "navigationStyle": "custom",
  "usingComponents": {
    "navBar": "/components/navBar/navBar",
  }
}

三.父頁面使用navBar組件

父頁面wxml文件

<navBar backType="editLaw" bind:parentClose="parentClose" title="{{navigaTitle}}"></navBar>

父頁面js文件文章來源地址http://www.zghlxwxcb.cn/news/detail-857208.html

parentClose: function () {
   this.triggerEvent('parentClose');
},

到了這里，關(guān)于微信小程序自定義導航欄navBar組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！