1.新建組件

index.json

{
  "component": true
}

navbar.wxss

//navbar.wxss
.navbar{
  width: 100%;
  //設(shè)置導航欄固定在頂部
  position: fixed;
  top: 0;
  z-index: 99;
}
.arrow-content{
  position: absolute;
  left: 40rpx;
  z-index: 999;
  display: flex;
  align-items: center;
}
.arrow{
  width: 20rpx;
  height: 20rpx;
  border: 5rpx solid #FFFFFF;
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform: rotate(-45deg);
}
.text{
  position: absolute;
  left: 0;
  right: 0;
  font-size: 39rpx;
  font-weight: bolder;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

index.ts

// 獲取應用實例
const app = getApp();
Component({
  properties: {
    navbarData: {   //navbarData   由父頁面?zhèn)鬟f的數(shù)據(jù)，變量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    },
    background:{
      type: String,
      value: 'linear-gradient(to right,#FF3413,#FF924D)'
    },
    isSowArrow:{
      type: Boolean,
      value: true
    },
  },
  data:{
    capsuleTop: '', //膠囊距離屏幕頂部的距離
    capsuleHeight: '', //膠囊高度
    navbarHeight: '' //導航欄高度
  },
  lifetimes: {
    attached: function () {
      this.setData({
        capsuleTop: app.globalData.capsule.top, 
        capsuleHeight: app.globalData.capsule.height, 
        navbarHeight: (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight, 
      })
     }
  },
  methods: {
    handleGoToBack(){
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

index.wxml

<view class="navbar" style="background:{{background}};height:{{navbarHeight}}px">
  <view style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px;" class="arrow-content">
    <view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view>
  </view>
  <view class="text" style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px">{{navbarData.title}}</view>
</view>

組件定義完畢

2.修改app.ts文件，獲取膠囊和系統(tǒng)信息

App({
  globalData: {
    system: '',
    capsule: ''
  },
  onLaunch: function () {
   // 在 app.js 中全局獲取一次系統(tǒng)和膠囊信息
   // 獲取系統(tǒng)信息
   wx.getSystemInfo({
    success: res => {
      this.globalData.system = res
    }
  })
  // 獲取膠囊信息
  this.globalData.capsule = wx.getMenuButtonBoundingClientRect()
  }
})

3.在具體頁面中引用，index.wxml

<!-- 引入自定義導航欄組件 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

修改對應index.ts文件

data: {
    // 組件所需的參數(shù)
    nvabarData: {
      showCapsule: 0, //是否顯示左上角圖標   1表示顯示    0表示不顯示
      title: '信息', //導航欄 中間的標題
    },
  
  },

4.實現(xiàn)效果

?參考：微信小程序?qū)崿F(xiàn)原生導航欄和自定義頭部導航欄_微信小程序頭部導航欄_花鐺的博客-CSDN博客

微信小程序自定義封裝頂部導航欄_碼磚猿的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-690214.html

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