设置导航栏样式自定义
一定要设置,不然页面会出现一个原生的导航栏,一个自定义的
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、文字等),采取绝对布局,且是相对于底部的,这样才能在预览中得到想要的效果
最终效果: