详细代码请见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”,"票圈长视频",我们公司的小程序也在计划用

自定义微信小程序导航(兼容各种手机)的更多相关文章

  1. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  2. 微信小程序例子-保存图片到手机相册

    微信小程序例子-保存图片到手机相册 1.关键代码 1)WXML文件 2)JS文件 saveImgToPhotosAlbumTap: function(){ // 图片必须是 https 的 var I ...

  3. 微信小程序-导航 & 路由

    微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...

  4. 微信小程序——导航栏组件

    组件内属性详解   属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.a ...

  5. 个人也能申请微信小程序获得APPID和手机测试效果

    微信小程序昨晚火爆公测,我也第一时间注册了小程序账号开启公测之旅. 注册过程可以看文档:https://my.oschina.net/imhoodoo/blog/780901 进入后台之后我们其实主要 ...

  6. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  7. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  8. 微信小程序 导航(a 连接)自定义组件

    导航:navigator 组件 组件上的属性: target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid ...

  9. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

随机推荐

  1. HTTP协议头部与Keep-Alive模式详解(转)

    转自:http://a280606790.iteye.com/blog/1095085 http1.1 中怎么打开持久连接,怎么关闭,怎么传输数据(确定本次数据是否传输完毕) 1.什么是Keep-Al ...

  2. golang struct 和 byte互转

    相比于encoding, 使用unsafe性能更高 type MyStruct struct { A int B int } var sizeOfMyStruct = int(unsafe.Sizeo ...

  3. FlowerVisor理解

    Ï来自FlowVisor: A Network Virtualization Layer这篇论文的理解 1. 简介 论文讲述如何虚拟化一个网络,并描述一个特殊的系——FlowVisor 网络虚拟化用来 ...

  4. fildder

    来自 墨痕 :https://home.cnblogs.com/u/ink-marks/ FIDDLER的使用方法及技巧总结   一.FIDDLER快速入门及使用场景 Fiddler的官方网站:htt ...

  5. History of program

    第一阶段:1950与1960年代 1.三个现代编程语言: (1)Fortran (1955),名称取自"FORmula TRANslator"(公式翻译器),由约翰·巴科斯等人所发 ...

  6. JS 简单工厂模式,工厂模式(二)

    一.什么是工厂模式: 工厂模式就是用来创建对象的一种最常用的设计模式,我们不暴露创建对象的具体逻辑,而是将逻辑封装到一个函数中,那么,这个函数 就可以被视为一个工厂.那么,在实际项目中,我们是不是可以 ...

  7. 【高并发架构】Redis特点及构件模型

    数据结构 redis 相比 memcached 来说,拥有更多的数据结构,能支持更丰富的数据操作.如果需要缓存能够支持更复杂的结构和操作, redis 会是不错的选择. redis 主要有以下几种数据 ...

  8. ChartControl设置坐标轴范围

    需求:有一条坐标轴是用来表示百分比的,所以刻度范围只能是从0 - 100: 解决方法:运行chatcontrol设计器,选中需要设置的轴,如下图: 设置Whole range 的最大最小值: 默认情况 ...

  9. js根据顺序加载,有依赖关系

    function loadScript(url, callback) { var script = document.createElement("script"); script ...

  10. MYSQL手册

    原文出处:http://www.cnblogs.com/gaofei-1/p/7152875.html MySQL配置文件 MySQL软件使用的配置文件名为my.ini,在安装目录下. MySQL常用 ...