Android自定义胶囊按钮,小程序自定义导航栏设置

为了摆脱小程序单一的顶部导航栏样式，添加更为炫酷的导航栏

设置导航栏宽高 (bug更新，ios真机上出现部分手机获取不到胶囊按钮信息的问题)

//建议全局设置,在app.js 生命周期函数onLaunch获取

//接下来，先获取系统信息

wx.getSystemInfo({

success: e => {

// console.log(e);

const systemInfo = e;

/**

* 胶囊按钮信息 - 拼多多解决方法

* 微信bug，存在获取胶囊按钮失败的bug

*/

// 同步获取胶囊按钮信息 (优先缓存中获取)

let custom_info = wx.getStorageSync('custom_info');

let custom = null;

// 胶囊按钮优先从缓存中获取

if (custom_info) {

custom = JSON.parse(wx.getStorageSync('custom_info'));

} else {

try {

custom = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;

if (custom === null) {

throw 'getMenuButtonBoundingClientRect error';

}

//取值为0的情况

if (!custom.width) {

throw 'getMenuButtonBoundingClientRect error';

}

wx.setStorageSync('custom_info', JSON.stringify(custom));

} catch (error) {

let gap = ''; //胶囊按钮上下间距 使导航内容居中

let width = 96; //胶囊的宽度，android大部分96，ios为88

if (systemInfo.platform === 'android') {

gap = 8;

width = 96;

} else if (systemInfo.platform === 'devtools') {

if (/IOS/i.test(systemInfo.system)) {

gap = 5.5; //开发工具中ios手机

} else {

gap = 7.5; //开发工具中android和其他手机

}

} else {

gap = 4;

width = 88;

}

if (!systemInfo.statusBarHeight) {

//开启wifi的情况下修复statusBarHeight值获取不到

systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;

}

custom = {

//获取不到胶囊信息就自定义重置一个

bottom: systemInfo.statusBarHeight + gap + 32,

height: 32,

left: systemInfo.windowWidth - width - 10,

right: systemInfo.windowWidth - 10,

top: systemInfo.statusBarHeight + gap,

width: width

};

// console.log('error', error);

// console.log( custom);

}

}

// console.log(custom);

this.globalData.custom = custom;

this.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight;

this.globalData.statusBar = e.statusBarHeight;

//

this.globalData.systemInfo = e

// console.log(this.globalData.systemInfo)

// 判断是否iphone x 11，留出底部安全距离

const iphoneX = /iphone x/i.test(e.model);

const iphoneNew = /iPhone11/i.test(e.model) && screenHeight === 812;

this.globalData.isIPhoneX = iphoneX || iphoneNew;

}

})

3.实际操作,试下来个渐变色的导航栏

js

data: {

statusBarHeight: app.globalData.statusBarHeight,

CustomBarHeight: app.globalData.CustomBarHeight,

}

wxml

//app.wxss

app.wxss

/* 顶部导航栏 */

.nav-custom{

display:block;

position:relative;

}

.naccustombar{

padding-right: 107px;

}