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

设置导航栏样式自定义

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

javascript 复制代码
// app.json文件
"window": {
    "navigationStyle": "custom"
}

设置导航栏样式

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

wxml

html 复制代码
<!--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

html 复制代码
  <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

javascript 复制代码
.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

javascript 复制代码
// 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

javascript 复制代码
{
  "component": true,
  "usingComponents": {
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-navbar": "tdesign-miniprogram/navbar/navbar"
  }
}

自定义导航栏高度

计算导航栏高度

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

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

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

javascript 复制代码
  data: {
    navBarHeight: getApp().globalData.navBarHeight,
  }

布局

javascript 复制代码
<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、文字等),采取绝对布局,且是相对于底部的,这样才能在预览中得到想要的效果

最终效果:

相关推荐
走,带你去玩4 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉4 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code5 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤6 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀13 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ66618 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十19 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄19 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224419 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_19 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html