有时候项目中需要在navigation中展示产品logo等信息，这时候就需要自定义navigation了。但是小程序中如果使用了自定义的navigation ，就默认每个页面的navigation都是自定义的，无法针对单个页面自定义navagation，先说一下思路。
- 在app.js中获取手机屏幕高度、工具栏高度等信息，保存在app.globalData中
- 由于自定义了navigation，页面上的100vh就会比原来变高，所以在navigation组件中要写两部分，一种是自定义的navigation自身，fixed在页面顶部，另一个是与navigation等高度的一个view，用来撑起页面的顶部。
先贴上获取手机屏幕高度的代码：
getSystemInfo: function () {
wx.getSystemInfo({
success: function (res) {
console.log('用户手机型号=====', res)
}
})
const systemInfo = wx.getSystemInfoSync();
let iphoneX = '';
if (systemInfo) {
const { statusBarHeight, model, windowHeight } = systemInfo;
let totalTopHeight = 68;
if (model.indexOf('iPhone X') !== -1) {
totalTopHeight = 94;
iphoneX = 'iphone-x';
} else if (model.indexOf('iPhone') !== -1) {
totalTopHeight = 64;
} else if (model.indexOf('MI 8') !== -1) {
totalTopHeight = 88;
}
const titleBarHeight = totalTopHeight - statusBarHeight;
this.globalData.systemInfo = {
...systemInfo,
statusBarHeight,
titleBarHeight,
totalTopHeight,
iphoneX,
windowHeight,
};
}
},
navigation组件wxml部分：
<!-- 随着页面可以下拉的，仅有背景色 -->
<view class="navigation-temp" style="height: {{totalTopHeight}}px; padding-top: {{barHeight}}px; background-color: {{bgColor}}"></view>
<!-- 固定在顶部的真实的导航 -->
<view class="navigation" style="height: {{totalTopHeight}}px; padding-top: {{barHeight}}px; background-color: {{bgColor}}">
<!-- 没有返回按钮 -->
<view wx:if="{{showBackButton}}" class="slot" style="top: {{barHeight}}px">
<slot></slot>
<image class="logoImage" wx:if="{{isShowLogo}}" style="margin-top: {{logoMargin}}" src="{{logoSrc}}" mode="widthFix" />
</view>
<!-- 正常返回按钮 -->
<block wx:else>
<view catch:tap="onBack" class="back-btn" hover-class="hover" style="top: {{barHeight}}px" wx:if="{{showBackButton}}">
<image class="nav-icon" src="{{navIconUrl}}" mode="aspectFit"></image>
</view>
<view class="title {{titleClass}}" style='{{navTitleStyle}}'> <image wx:if="{{isShowLogo}}" class="{{headLogoStyle}}" src="{{logoSrc}}" />
{{title}}
</view>
</block>
</view>
组件JS部分：
//引入app中的变量
const app = getApp();
const { systemInfo } = app.globalData;
const { statusBarHeight } = systemInfo;
const { totalTopHeight } = systemInfo;
const titleBarHeight = systemInfo ? systemInfo.titleBarHeight : 44;
//定义属性
properties: {
// 是否展示头部logo
isShowLogo: {
type: Boolean,
value: false,
},
// logo图片样式
headLogoStyle: {
type: String,
value: 'width: 186rpx; height: 40rpx;',
},
// logo 图片地址
logoSrc: {
type: String,
value: '/imgs/navigation_icon.png',
},
// 可传入改变navbar样式
bgColor: {
type: String,
value: '#fff',
},
// 文字
title: {
type: String,
value: '页面标题',
},
// 高度
totalTopHeight: {
type: Number,
value: totalTopHeight,
},
textStyle: {
type: String,
value: 'white'
},
// 可传入改变nav back页面数
delta: {
type: Number,
value: 1,
},
// 是否显示返回按钮
showBackButton: {
type: Boolean,
value: true,
},
},
data {
barHeight: statusBarHeight,
navIconUrl: config.imgUrl + 'miniapp/imgs/back_icon.png',
navTitleStyle: 'color: #333;',
navBgStyle: 'background-color: #fe7f43;',
logoMargin: (titleBarHeight/2 - 19) + 'px',
},
methods: {
onBack() {
this.triggerEvent('onBack', {});
const pages = getCurrentPages();
if (this.data.showBackButton) {
if (pages.length > 1) {
wx.navigateBack({
delta: this.data.delta,
});
} else {
wx.switchTab({
url: '/pages/index/index',
});
}
}
}
},
页面中引用
<navigation showBackButton="{{false}} " isShowLogo="{{true}}" bgColor="{{'#55adff'}}"></navigation>
