当前位置：首页 > news >正文

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

news 2024/9/20 14:05:12

设置导航栏样式自定义

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

// 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;
}

// 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();// 导航栏高度 = 状态栏高度 + 44that.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>