⼩程序⾃定义导航教程（兼容各种⼿机）
前⾔
本⽂主要给⼤家介绍了关于⼩程序⾃定义导航的相关内容，详细代码请见github，（），其中有原⽣⼩程序的实现，也有wepy版本的实现
了解⼩程序默认导航
如上图所⽰，导航分为两部分，第⼀个部分为statusBarHeight，刘海屏⼿机（iPhone X，⼩⽶8等）会⽐其他的⼿机⾼很多，第⼆部分为titleBarHeight，安卓和IOS的⾼度不同，但是IOS⾼度是⼀样的，IOS⾼度是⼀样的,
所以我们要实现⼀个兼容不同⼿机的导航必须要根据不同的⼿机实现statusBarHeight和titleBarHeight
第⼀步：全局设置
把app.json中的window中的navigationStyle设置为custom，
设置完之后发现导航栏变成了如下图所⽰，只剩下了右上⾓胶囊按钮
第⼆步：确定导航栏两部分的⾼度
（1）确定第⼀部分statusBarHeight的⾼度，这部分是⼿机⽤来展⽰时间，信号和⼿机电量的，我们可以从wx.getSystemInfo从获得
success: function(res) {
console.log(res.statusBarHeight)
}
})
（2）第⼆部分titleBarHeight为⼩程序导航栏的⾼度，经过我查询⽆数⽂档和实践得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px （3）最后总结⼀下⼩程序的⾼度代码为
success: function(res) {
let titleBarHeight = 0
if (del.indexOf('iPhone') !== -1) {
titleBarHeight = 44
} else {
titleBarHeight = 48
}
that.setData({
statusBarHeight: res.statusBarHeight,
titleBarHeight: titleBarHeight
});
},
failure() {
that.setData({
statusBarHeight: 0,
titleBarHeight: 0
});
}
})
第三步：编写Navigation组件
（1）Navigation.js
const app = getApp();
Component({
properties: {
//⼩程序页⾯的标题
title: {
type: String,
default: '默认标题'
},
//是否展⽰返回和主页按钮
showIcon: {
type: Boolean,
default: true
}
},
data: {
statusBarHeight: 0,
titleBarHeight: 0,
},
ready: function () {
// 因为每个页⾯都需要⽤到这连个字段，所以放到全局对象中
if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) {
this.setData({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
});
} else {
let that = this
success: function(res) {
if (!app.globalData) {
app.globalData = {}
}
if (del.indexOf('iPhone') !== -1) {
app.globalData.titleBarHeight = 44
} else {
app.globalData.titleBarHeight = 48
}
app.globalData.statusBarHeight = res.statusBarHeight
that.setData({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
});
},
failure() {
that.setData({
statusBarHeight: 0,
titleBarHeight: 0
});
}
})
}
},
methods: {
headerBack() {
wx.navigateBack({
delta: 1,
fail(e) {
wx.switchTab({
url: '/pages/main/main'
})
}
})
},
headerHome() {
wx.switchTab({
url: '/pages/main/main'
})
}
}
})
(2) Navigation.wxml
<view >
<view class="header" >
<view wx:if="{{showIcon}}" class="title-bar">
<view class="back" bindtap="headerBack"><image src="/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
<view class="line"></view>
<view class="home" bindtap="headerHome"><image src="/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view>
</view>
<view class="header-title">{{title}}</view>
</view>
</view>
css就不贴了，有点多，需要的朋友可以去的github上拿（）
第四步：展⽰效果
iPhone X展⽰效果
iPhone 7展⽰效果
⼩⽶8展⽰效果
⽤我们公司的测试机基本上都试了⼀遍，基本上都能正常显⽰，别问我为什么样式和右边这么相似，因为我是叫公司设计给了我样式
解决下拉刷新的问题
图⼀为默认导航下的下拉刷新，显⽰正常，图⼆为⾃定义导航栏下的下拉刷新，显⽰异常，中间有⼀⼤块空⽩。
写文章的小程序如果解决这个问题，我们⾃定义⼀个加载动画，藏在导航底下
（1）把app.json中的window设置为如下，这样加载动画就隐藏了，因为加载动画必须要设置window
的backgroundTextStyle=black和backgroundColor=#F3F3F3才会显⽰如上图所⽰
window: { "navigationStyle": "custom", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ICY买⼿店", "navigationBarTextStyle": "black"}（2）修改Navigation.wxml
<view >
<view class="header" >
<view wx:if="{{showIcon}}" class="title-bar">
<view class="back" bindtap="headerBack"><image src="/Files/08/6b/08
6b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>  <view class="line"></view>
<view class="home" bindtap="headerHome"><image src="/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view> </view>
<view class="header-title">{{title}}</view>
</view>
<view class="loading-wrap"><image class="loading-gif" src="/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view> </view>
效果如下图，加载动画我可能写的不太好看
问题：这样做在iPhone上是能正常展⽰的，但是在安卓上还有⼀点⼩问题，⾃定义导航栏的标题和图标有⼀起滑动
注意点
（1）安卓⼿机下拉刷新还是会有⼀点点展⽰问题
（2）项⽬所有fixed的元素都需要改，top需要加上导航栏的⾼度
⽬前哪些⼩程序在⽤⾃定义导航栏
我所知道的有 “bilibili”，"票圈长视频"，我们公司的⼩程序也在计划⽤
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。