微信小程序自定义导航教程（兼容各种手机）

更新时间：2018年12月12日 08:58:01 作者：面包大虾

这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容，文中通过示例代码介绍的非常详细，兼容各种手机,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要给大家介绍了关于微信小程序自定义导航的相关内容，详细代码请见github，请点击地址（本地下载），其中有原生小程序的实现，也有wepy版本的实现

了解小程序默认导航

如上图所示，微信导航分为两部分，第一个部分为statusBarHeight，刘海屏手机（iPhone X，小米8等）会比其他的手机高很多，第二部分为titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一样的，IOS高度是一样的,

所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight

第一步：全局设置

把app.json中的window中的navigationStyle设置为custom，官方文档链接

设置完之后发现导航栏变成了如下图所示，只剩下了右上角胶囊按钮

第二步：确定导航栏两部分的高度

（1）确定第一部分statusBarHeight的高度，这部分是手机用来展示时间，信号和手机电量的，我们可以从wx.getSystemInfo从获得

wx.getSystemInfo({
 success: function(res) {
 console.log(res.statusBarHeight)
 }
})

（2）第二部分titleBarHeight为小程序导航栏的高度，经过我查询无数文档和实践得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px

（3）最后总结一下微信小程序的高度代码为

wx.getSystemInfo({
 success: function(res) {
 let titleBarHeight = 0
 if (res.model.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
  wx.getSystemInfo({
  success: function(res) {
   if (!app.globalData) {
   app.globalData = {}
   }
   if (res.model.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 style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view wx:if="{{showIcon}}" class="title-bar">
  <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
  <view class="line"></view>
  <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/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 style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view wx:if="{{showIcon}}" class="title-bar">
  <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
  <view class="line"></view>
  <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/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="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view>
</view>

效果如下图，加载动画我可能写的不太好看

问题：这样做在iPhone上是能正常展示的，但是在安卓上还有一点小问题，自定义导航栏的标题和图标有一起滑动

注意点

（1）安卓手机下拉刷新还是会有一点点展示问题

（2）项目所有fixed的元素都需要改，top需要加上导航栏的高度

目前哪些小程序在用自定义导航栏

我所知道的有 “bilibili”，"票圈长视频"，我们公司的小程序也在计划用

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

使用TypeScript实现杨辉三角的代码示例
杨辉三角,又称帕斯卡三角,是一个数学上非常有趣和重要的概念,它是一种数学结构,它不仅可以用于组合数学,还可以应用于代数、概率和许多其他领域,在本文中,我们将通过使用 TypeScript 来编写杨辉三角的程序,同时深入探讨 TypeScript 的类型系统
2023-09-09
详解weex默认webpack.config.js改造
本篇文章主要介绍了详解weex默认webpack.config.js改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
JavaScript 浮点数运算精度问题
JavaScript小数在做四则运算时，精度会丢失，这会在项目中引起诸多不便，先请看下面脚本。
2009-10-10
JavaScript面试题大全(推荐)
在javascript开发中，js面试题是必问的一项，今天小编抽时间给大家整理些js常见的面试题，对js面试题相关知识感兴趣的朋友一起看看吧
2016-09-09
Bootstrap table 定制提示语的加载过程
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。这篇文章主要介绍了Bootstrap table 定制提示语,需要的朋友可以参考下
2017-02-02
js实现倒计时秒杀效果
这篇文章主要为大家详细介绍了js实现倒计时秒杀效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
javascript强大的日期函数代码分享
这篇文章介绍了javascript强大的日期函数代码，有需要的朋友可以参考一下
2013-09-09
js 浏览本地文件夹系统示例代码
js 浏览本地文件夹系统不可思议吧，经测试效果还是不错的，感兴趣的朋友可以参考下
2013-10-10
javascript 使用 NodeList需要注意的问题
理解NodeList及其近亲NamedNodeMap和HTMLCollection，是从整体上透彻理解DOM的关键所在，这三个集合都是“动态的”，换句话说，每当文档结构发生变化时，他们都会得到更新。
2013-03-03
JavaScript Event学习第十章一些可替换的事件对
为了让我们的JavaScript驱动的页面对那些不能或者不想使用鼠标的用户也能很好的使用，我们对于像mouseover和click这样的事件做一些处理，同样的，对于非鼠标事件也同样的要我们的脚本执行。
2010-02-02