微信小程序开发自定义“navigationBarTitleText“

最新推荐文章于 2025-10-13 17:10:45 发布

原创最新推荐文章于 2025-10-13 17:10:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍了如何在微信小程序中实现自定义导航栏标题`navigationBarTitleText`的步骤，包括在`.json`配置文件中设置，以及在`.wxml`和对应的`.js`文件中的操作方法。

1.首先在.json文件中进行配置；

{
  "navigationBarTitleText": "导航栏自定义~",
  "navigationStyle":"custom",
  "usingComponents": {
     
   }
}

2.页面.wxml

<view class="custom_head" style="height:{{globalData.navHeight+5}}px;">
  <view class="flex-row j_b" style="height:{{globalData.navObj}}px;padding-top:{{globalData.navTop+5}}px;padding-right:{{globalData.navObjWid+5}}px;margin-left: 15px; ">
        <image src="/assets/img/home/dingwei.png" mode="heightFix" style="width: 38rpx;height: 38rpx;vertical-align:top;" />
        <text class="locationFont" >西北大学第一医院</text>
  </view>
</view>

3.对应的js

const app = getApp()
Page({
  data{
     //取到自己定义的高度
    customheight: app.globalData.customheight,
    globalData: {
      navHeight:0, //导航栏总体高度
      navTop:0,//胶囊距离顶部距离
      navObj:0,//胶囊高度
      navObjWid:0 //胶囊宽度(包括右边距离)
     },
     
   }
)}

onLoad(){
  
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
      wx.getSystemInfo({
        success: res => {
          //导航高度
          let statusBarHeight = res.statusBarHeight,
            navTop = menuButtonObject.top,
            // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
            navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, 
            navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
            Object.assign(app.globalData,this.data.globalData)
            this.setData({
              'globalData.navHeight': navHeight,
              'globalData.navTop':navTop, //胶囊距离顶部距离
              'globalData.navObj':menuButtonObject.height,//胶囊高度
              'globalData.navObjWid':navObjWid //胶囊宽度(包括右边距离)
            });
}