自定义导航栏在刚出的时候已经有很多实现方案了,但是还有大哥在问,那这里再贴下代码及原理:
首先在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。
以下为收集到的社区老哥们的分享:
@志军:
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
感谢楼主分享,我也写了一个,目前还在想怎么把全屏的需求加入进去
小程序顶部自定义导航组件实现原理及坑分享
这就是大佬的世界吗?
恩 写死这种方法很骚 继续加油
这是 自定义头部导航栏的方法刚出的时候写的。当时刘海屏还只有IOS,安卓是后来才出的。方法一直没改,我们也没啥场景用到,只是社区有个老哥问咋弄 我才翻了下老代码直接贴出来了。
完美解决自定义导航栏上下不居中,左右不对称问题,点我直达
全部复制粘贴,变成这样了,怎么办?
[ pages/my/my.json 文件内容错误] pages/my/my.json: ["usingComponents"]["navigate-title"] 未找到(env: Windows,mp,1.05.2110290; lib: 2.19.4)
难道没有遇到:
自定义组件attached已执行,但onLanuch钩子中的方法还未执行返回的情况吗?
底部弹出式切换试试这个组件https://github.com/MakerGYT/mini-menu
上下跟胶囊不垂直居中
老大帮看一下,出现这样的错误怎么办?
VM2177:1 thirdScriptError
wx.getMenuButtonBoundingClientRect is not a function;at App lifeCycleMethod onLaunch function
TypeError: wx.getMenuButtonBoundingClientRect is not a function
at e.onLaunch (http://127.0.0.1:16547/appservice/app.js:8:20)
at e.o (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:8686)
at new e (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:10040)
at Function.<anonymous> (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:10529)
at http://127.0.0.1:16547/appservice/__dev__/WAService.js:17:22296
at http://127.0.0.1:16547/appservice/app.js:4:1
at require (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:16253)
at <anonymous>:1:1
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:16547/appservice/appservice?t=1583757840230:1229:21)
at HTMLScriptElement.script.onload (http://127.0.0.1:16547/appservice/appservice?t=1583757840230:1241:20)
console.error @ VM2177:1
errorReport @ VM2193 WAService.js:3
thirdErrorReport @ VM2193 WAService.js:3
(anonymous) @ VM2193 WAService.js:3
o @ VM2193 WAService.js:18
e @ VM2193 WAService.js:18
(anonymous) @ VM2193 WAService.js:18
(anonymous) @ VM2193 WAService.js:17
(anonymous) @ app.js? [sm]:2
require @ VM2193 WAService.js:18
(anonymous) @ VM2206:1
scriptLoaded @ appservice?t=1583757840230:1229
script.onload @ appservice?t=1583757840230:1241
load (async)
(anonymous) @ appservice?t=1583757840230:1240
(anonymous) @ appservice?t=1583757840230:1293
VM2207:4 Mon Mar 09 2020 20:44:01 GMT+0800 (中国标准时间) sitemap 索引情况提示
为啥第一段粘进app.js就报错
为什么我打不开啊