本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址,(本地下载),其中有原生小程序的实现,也有wepy版本的实现
如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小8米等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的,
所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight
把app.json中的窗口中的navigationStyle设置为定制,官方文档链接
设置完之后发现导航栏变成了如下图所示,只剩下了右上角胶囊按钮
(1)确定第一部分statusBarHeight的高度,这部分是手机用来展示时间,信号和手机电量的,我们可以从wx.getSystemInfo从获得
wx.getSystemInfo ({
成功:函数(res) {
console.log (res.statusBarHeight)
}
})
(2)第二部分titleBarHeight为小程序导航栏的高度,经过我查询无数文档和实践得知,在iPhone上<代码> titleBarHeight=44 px> titleBarHeight=48 px
(3)最后总结一下微信小程序的高度代码为
wx.getSystemInfo ({
成功:函数(res) {
让titleBarHeight=0
如果(res.model.indexOf (iPhone) !==1) {
titleBarHeight=44
其他}{
titleBarHeight=48
}
that.setData ({
statusBarHeight: res.statusBarHeight,
titleBarHeight: titleBarHeight
}）;
}，
失败(){
that.setData ({
statusBarHeight: 0,
titleBarHeight: 0
}）;
}
})
(1)Navigation.js
const应用=getApp ();
组件({
属性:{//小程序页面的标题
标题:{
类型:字符串,
默认值:“默认标题”
}，//是否展示返回和主页按钮
showIcon: {
类型:布尔,
默认值:真正的
}
}，
数据:{
statusBarHeight: 0,
titleBarHeight: 0,
}，
准备:函数(){//因为每个页面都需要用到这连个字段,所以放到全局对象中
如果(app.globalData,,app.globalData。statusBarHeight,,app.globalData.titleBarHeight) {
this.setData ({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
}）;
其他}{
让这=wx.getSystemInfo ({
成功:函数(res) {
如果(! app.globalData) {
app.globalData=https://www.yisu.com/zixun/{}
}
如果(res.model.indexOf (iPhone) !==1) {
app.globalData。titleBarHeight=44
其他}{
app.globalData。titleBarHeight=48
}
app.globalData。statusBarHeight=res.statusBarHeight
that.setData ({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
}）;
}，
失败(){
that.setData ({
statusBarHeight: 0,
titleBarHeight: 0
}）;
}
}）
}
}，
方法:{
headerBack () {
wx.navigateBack ({
三角洲:1、
失败(e) {
wx.switchTab ({
url:/页面/主/主要的
}）
}
}）
}，
headerHome () {
wx.switchTab ({
url:/页面/主/主要的
}）
}
}
})
(2)Navigation.wxml
& lt;视图比;
& lt;视图类=巴贰北?
& lt;查看天气:如果=" {{showIcon}}”类=氨晏饫浮北?
& lt;视图类=胺祷亍眀indtap=癶eaderBack祝辞& lt;图像src=" https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png "祝辞& lt;/image> & lt;/view>
& lt;视图类="线"祝辞& lt;/view>
& lt;视图类=凹摇眀indtap=癶eaderHome祝辞& lt;图像src=" https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png "祝辞& lt;/image> & lt;/view>
& lt;/view>
& lt;视图类="标题"在{{标题}}& lt;/view>
& lt;/view>
& lt;/view>
