如何实现一个自定义导航栏
自定义导航栏在刚出的时候已经有很多实现方案了，但是还有大哥在问，那这里再贴下代码及原理：
首先在App.js的 onLaunch中获取当前手机机型头部状态栏的高度，单位为px，存在内存中，操作如下：
[代码]onLaunch() {
wx.getSystemInfo({
success: (res) => {
this.globalData.statusBarHeight = res.statusBarHeight
this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)
},
failure() {
this.globalData.statusBarHeight = 0
this.globalData.titleBarHeight = 0
}
})
}
[代码]
然后需要在目录下新建个components文件夹，里面存放此次需要演示的文件 navigateTitle
WXML 文件如下：
[代码]<view class="navigate-container">
<view style="height:{{statusBarHeight}}px"></view>
<view class="navigate-bar" style="height:{{titleBarHeight}}px">
<view class="navigate-icon">
<navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" />
<navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else />
</view>
<view class="navigate-title">{{title}}</view>
<view class="navigate-icon"></view>
</view>
</view>
<view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view>
[代码]
WXSS文件如下：
[代码].navigate-container {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background: #FFF;
}
.navigate-bar {
width: 100%;
display: flex;
justify-content: space-around;
}
.navigate-icon {
width: 100rpx;
height: 100rpx;
display: flex;
justify-content: space-around;
}
.navigate-title {
width: 550rpx;
text-align: center;
line-height: 100rpx;
font-size: 34rpx;
color: #3c3c3c;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/*箭头部分*/
.navigator-back {
width: 36rpx;
height: 36rpx;
align-self: center;
}
.navigator-back:after {
content: '';
display: block;
width: 22rpx;
height: 22rpx;
border-right: 4rpx solid #000;
border-top: 4rpx solid #000;
transform: rotate(225deg);
}
.navigator-home {
width: 56rpx;
height: 56rpx;
background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center;
background-size: 100% 100%;
align-self: center;
}
[代码]
JS如下：
[代码]var app = getApp()
Component({
data: {
statusBarHeight: '',
titleBarHeight: '',
isShowHome: false
},
properties: {
//属性值可以在组件使用时指定
title: {
type: String,
value: '青团公益'
}
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show() {
let pageContext = getCurrentPages()
if (pageContext.length > 1) {
this.setData({
isShowHome: false
})
} else {
this.setData({
isShowHome: true
})
}
}
},
attached() {
this.setData({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
})
},
methods: {}
})
[代码]
JSON如下：
[代码]{
"component": true
}
[代码]
如何引用？
需要引用的页面JSON里配置：
[代码]"navigationStyle": "custom",
"usingComponents": {
"navigate-title": "/pages/components/navigateTitle/index"
}
[代码]
WXML
[代码]<navigate-title title="青团社" />
[代码]
按上面步骤操作即可实现一个自定义的导航栏。 如何实现通栏的效果默认透明以及滚动更换title为白色背景，如下图所示:
[图片]
[图片]
[图片]
[图片]
最后代码片段如下：
https://developers.weixin.qq.com/s/wi6Pglmv7s8P。
以下为收集到的社区老哥们的分享：
@Yunior:
小程序顶部自定义导航组件实现原理及坑分享
@志军:
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
@✨o0o有脾气的酸奶💤
[有点炫]自定义navigate+分包+自定义tabbar
@安晓苏
分享一个自适应的自定义导航栏组件
