微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型，使用tdesign-miniprogram t-navbar设置背景图片

设置导航栏样式自定义

一定要设置，不然页面会出现一个原生的导航栏，一个自定义的

// app.json文件
"window": {
    "navigationStyle": "custom"
}

设置导航栏样式

我这里使用tdesign-miniprogram t-navbar，t-navbar好像做了高度自适应，也可以看下一部分自己定义导航栏自适应的高度。下面是我集成的commonNav组件代码
wxml

<!--components/commonNav/commonNav.wxml-->
<t-navbar delta="{{delta}}" id="navbar" left-arrow="{{false}}" style="background-image: url({{baseUrl}}/index/topbg.png);" t-class="control" class="custom-navbar" title="{{title}}">
  <view slot="left" class="custom-capsule">
    <t-icon wx:if="{{back}}" bind:tap="goback" aria-role="button" aria-label="返回" name="chevron-left" class="custom-capsule__icon" />
    <t-icon wx:if="{{!back}}" bind:tap="onGoHome" aria-role="button" aria-label="首页" name="home" class="custom-capsule__icon" />
  </view>
</t-navbar>

或者如下，style visibility:visible

  <t-navbar t-class="control" id="navbar" t-class-left="left-box" style="visibility:visible;background-size:100% auto;background-position:top;background-image:url('{{baseUrl}}/shop/topbg.png')">
    <view class="new-product-info" slot="left">
      <view class="searchbox" bind:tap="goSearch">
        <view class="search flex jcc aic">
          <image src="{{baseUrl}}/search-icon.png" mode="widthFix" class="search-icon" />
          <text>搜索</text>
        </view>
      </view>
    </view>
  </t-navbar>

必须要 --td-navbar-bg-color: transparent；
wxss

.control {
  background-size: cover;
  --td-navbar-bg-color: transparent;
}
.custom-navbar {
  --td-navbar-color: #fff;
  --td-navbar-title-font-weight: 400;
  font-family: "pf_bold";
}

.custom-image {
  width: 100vw;
  height: 87px;
}
.custom-capsule {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-capsule__icon {
  flex: 1;
  position: relative;
  font-size: 48rpx;
}

js

// components/commonNav/commonNav.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '',

    },
    delta: {
      type: Number,
      value: 1,

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    baseUrl: getApp().globalData.baseUrl,
    back: true
  },

  /**
   * 组件的方法列表
   */
  lifetimes: {
    ready() {
      // console.log()

      if (getCurrentPages().length == 1) {
        getApp().globalData.hideIndexLoading = true;
        this.setData({
          back: false
        })
      }
    }
  },
  methods: {
    goback() {
      this.selectComponent('#navbar').goBack();
      this.triggerEvent('goback')
    },
    onGoHome() {

      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  }
})

json

{
  "component": true,
  "usingComponents": {
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-navbar": "tdesign-miniprogram/navbar/navbar"
  }
}

自定义导航栏高度

计算导航栏高度

此处选择在app.js文件（小程序启动时）计算并存储在全局变量中

    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;

页面引入全局变量的导航栏高度

  data: {
    navBarHeight: getApp().globalData.navBarHeight,
  }

布局

<view class="navCustom" style="height:{{navBarHeight}}px;">
  <view style="position: absolute; bottom: 10rpx; padding-left: 20rpx; width: 100%; display: flex; ">
    <image src="/images/logo.png" mode="" style="width: 60rpx; height: 60rpx;"/>
    <view style="height: 60rpx; display: flex; align-items: center; margin-left: 15rpx;">
      <text>公司名称</text>
    </view>
  </view>
</view>
<view style="margin-top:{{navBarHeight}}px;"></view>

对于要显示的内容（此项目中的logo、文字等），采取绝对布局，且是相对于底部的，这样才能在预览中得到想要的效果
最终效果：

原文地址：https://blog.csdn.net/qq_32849999/article/details/142381315

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！