1.配置app.json
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationStyle": "custom",//必填
"navigationBarTextStyle": "black"
},
2.小程序头部组件
js
// headTemplates/head/head.js
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父页面传递的数据，变量名字自命名
type: Object,
value: {},
observer: function(newVal, oldVal) {
//console.log(newVal, oldVal)
}
}
},
data: {
height: '',
//默认值 默认显示左上角
navbarData: {
showCapsule: 1
},
open: false
},
attached: function() {
// 获取是否是通过分享进入的小程序
this.setData({
share: app.globalData.share
})
// 定义导航栏的高度 方便对齐
this.setData({
totalTopHeight: app.globalData.totalTopHeight,
titleBarHeight: app.globalData.titleBarHeight,
statusBarHeight: app.globalData.statusBarHeight,
inputHeight: 64,
// inputHeight: app.globalData.inputHeight || 64,
})
var pages = getCurrentPages();
var currentPage = pages[pages.length - 1];
var url = currentPage.route; //获取路由
this.setData({
['navbarData.showBackImage']: pages.length > 1 ? true : false
})
var marginRight = 0;
if (this.data.navbarData.showHome && this.data.navbarData.showBackImage) {
marginRight = 186;
} else if (!this.data.navbarData.showHome && this.data.navbarData.showBackImage) {
marginRight = 84;
} else if (this.data.navbarData.showHome && !this.data.navbarData.showBackImage) {
marginRight = 102;
} else if (this.data.navbarData.eye) {
marginRight = 102;
} else {
marginRight = 0;
}
this.setData({
marginRight: marginRight
})
},
methods: {
// 返回上一页面
_navback() {
wx.navigateBack()
},
_eyeBtn() {
if (this.data.open) {
this.setData({
open: false
})
} else {
this.setData({
open: true
})
}
this.triggerEvent("openClick", {open:this.data.open})
},
//返回到首页
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
},
}
})
css
/* headTemplates/head/head.wxss */
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
/* background: red; */
color: #000;
z-index: 9999999;
}
/* .btnOpen{
width: 100rpx;
height: 100%;
text-align: center;
}
.btnOpen image{
width: 52rpx;
height: 36rpx;
} */
.nav-title-box{
/* display: flex;
align-items: center;
justify-content: flex-start; */
position: relative;
}
.nav-title{
/* margin: 0 auto;
flex:1; */
width: 100%;
text-align:center;
color: #333;
font-size: 32rpx;
font-weight:bold;
z-index: 1000000
}
.backBox{
position: absolute;
top: 0;
left: 0;
z-index: 1000001
}
.back-pre,.back-pres,.home-pre{
/* display: flex;
align-items: center;
justify-content: center; */
float: left;
/* margin: 22rpx; */
}
.back-pre-image{
width: 13rpx;
height: 24rpx;
margin-top: 4rpx;
padding: 10rpx 22rpx;
}
.back-pres-image{
width: 52rpx;
height: 36rpx;
/* margin-top: 4rpx; */
margin: 0 22rpx;
}
.home-pre-image{
width: 42rpx;
height: 42rpx;
padding: 10rpx 30rpx;
}
.home-pre .line{
width: 1px;
height: 36rpx;
background:rgba(204,204,204,1);
}
.nav-search{
width: 100%;
}
.nav_seach_left{
/* width:438rpx; */
/* height:64rpx; */
background:rgba(245,245,245,1);
/* background:#000; */
border-radius:32rpx;
position:relative;
/* margin-top:10rpx; */
float: left;
margin-left:16rpx;
/* margin-top: -4rpx; */
display: flex;
}
.nav_seach_left1{
width:60%;
}
.nav_seach_left2{
width:66%;
}
.nav_seach_logo{
width: 32rpx;
height:32rpx;
margin-left: 24rpx;
/* position:absolute;
left: 29rpx;
top:18rpx; */
}
.nav_seach_box_right{
width: 72%;
/* height:64rpx;
line-height:64rpx; */
/* margin:auto; */
padding-left:12rpx;
font-size:28rpx;
font-weight:400;
color:rgba(140,140,140,1);
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.placeholderstyle{
font-size:28rpx;
font-weight:400;
color:rgba(140,140,140,1);
}
.null_logo{
/* width: 200rpx; */
height:60rpx;
text-align:right;
position:absolute;
right: 30rpx;
/* top:2rpx; */
}
/* .null_logo image{
width: 24rpx;
height:24rpx;
vertical-align: top;
margin-top:20rpx;
} */
wxml
<!--headTemplates/head/head.wxml-->
<view class='nav-wrap' style='height: {{totalTopHeight}}px;border-bottom:1px solid rgba(237,237,237,1);background:#fff;'>
<view style='height: {{statusBarHeight}}px;'></view>
<!-- // 导航栏 中间的标题 -->
<view class='nav-title-box' style='height:{{titleBarHeight}}px;line-height:{{titleBarHeight}}px;'>
<view class='backBox'>
<view bindtap='_navback' class='back-pre' wx:if='{{navbarData.showBackImage?(!share?navbarData.showBackImage:navbarData.showBackImage):navbarData.showBackImage}}'>
<image class='back-pre-image' src='/images/back-pre.png' mode='aspectFill' style="margin-top:{{(totalTopHeight-24)/2}}rpx"></image>
</view>
<view bindtap='_eyeBtn' class='back-pres' wx:if='{{navbarData.eye}}'>
<image class='back-pres-image' wx:if='{{open==false}}' src='/assets/imgs/closeye.png' mode='aspectFill'></image>
<image class='back-pres-image' wx:if='{{open}}' src='../../../assets/imgs/openeye.png' mode='aspectFill'></image>
</view>
<view class='home-pre' wx:if="{{navbarData.showHome}}" bindtap='_backhome'>
<view class='line'></view>
<image class='home-pre-image' src='/assets/imgs/home@2x.png' mode='aspectFill'></image>
</view>
</view>
<view class='nav-title' wx:if='{{navbarData.titleShow}}' style='line-height:{{titleBarHeight}}px;margin-right:{{marginRight}}rpx;'>{{navbarData.title}}</view>
</view>
</view>
json
{
"component": true,
"usingComponents": {}
}
3.app.js
全局信息
totalTopHeight: 0, //自定义头部总高度
statusBarHeight: 0, //自定义头部状态栏高度
titleBarHeight: 0, //自定义头部标题栏高度
onShow
//获设备型号
wx.getSystemInfo({
success: function (res) {
self.globalData.phonexh = res.model.indexOf("iPhone X");
self.globalData.statusBarHeight = res.statusBarHeight;
var menuButton = wx.getMenuButtonBoundingClientRect();
var isiOS = res.system.indexOf('iOS') > -1;
if (!isiOS) {
self.globalData.totalTopHeight = 48 + res.statusBarHeight;
} else {
self.globalData.totalTopHeight = 44 + res.statusBarHeight;
}
self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;
}
})
4.页面中使用
wxml
<!--头部-->
<nav-bar bind:openClick='openVal' navbar-data='{{nvabarData}}'></nav-bar>
js
// 头部组件所需的参数
nvabarData: {
showHome: false, //是否显示Home
showBackImage: true, //是否显示左上角返回图片
titleShow: true, //是否显示中间标题
title: '登录', //导航栏 中间的标题
eye: false,
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.totalTopHeight,
