小程序自定义标题栏总结（微信小程序自定义标题栏）

由于最近的开发需求需要自定义标题栏，开始研究一下这方面的知识。在网上查询了一下资料，发现自定义标题栏还是挺简单的。

那么如何自定义头部呢？ 通过在app.js中设置navigationStyle属性，默认值为‘default’，自定义为‘custom’。

• 默认头部样式展示如下：

• 自定义头部样式展示如下：

可以看到自定义头部样式时，头部只保留胶囊，其他部分可以自己实现。

问题一：

眼看问题就要解决了，然后惊奇的发现又落入了另外一个坑。原来下程序的自定义标题栏是全局的。意味着所有页面都需要自己重新定义，泪奔。

问题二：

在开发的时候发现，在自定义标题栏的时候还有一个问题需要注意。适配iPhone x标题栏，因为高度是不一样的。

问题补充：

吸底按钮适配，在小程序页面中，吸底按钮是很常见的一种设计，我们一般会把一些重要的按钮放在页面底部悬浮不动。这个问题留在下节了解。

判断是否是Iphone X（参考：http://www.wxapp-union.com/portal.php?mod=view&aid=4306）

checkIsIPhoneX: function() {

const self = this

wx.getSystemInfo({

success: function (res) {

// 根据 model 进行判断

if (res.model.search('iPhone X') != -1) {

self.globalData.isIPX = true

}

// 或者根据 screenHeight 进行判断

// if (res.screenHeight == 812) {

// self.globalData.isIPX = true

// }

}

})

}

.navi-bar-view {

height: 64px;

/* 其他样式值 */

}

.navi-bar-view-IPX {

height: 88px;

/* 其他样式值 */

}