一、概念

上面整体就是自定义导航栏的区域(包括状态栏)

胶囊接口

/*获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点 */

wx.getMenuButtonBoundingClientRect();

/* 返回值：width、height、top、right、bottom、left*/

状态栏接口

wx.getSystemInfo({

success: e => {

console.log(e.statusBarHeight);/*状态栏高度，如上所示*/

}

})

height：custom.bottom +(custom.top - e.statusBarHeight);

/*即：胶囊下边界+胶囊到状态栏中间的间隔*/

二、自定义导航栏显示内容的区域

三、效果图

bgclass演示效果.png

textColor和backStyle的演示效果.png

背景图的演示.png

navBarBfc及返回及首页图标演示效果，刘亦菲是页面的image.png

四、实战代码，类似微博小程序

1.app.js部分。获取状态栏和胶囊信息

wx.getSystemInfo({

success: e => {

//状态栏

let statusBarHeight= e.statusBarHeight;

// 右上角胶囊

let menuButton = wx.getMenuButtonBoundingClientRect();

//胶囊宽度加上左右边距的新宽度【即自定义导航栏时，左边元素的margin-right的值】

menuButton.extendWidth=menuButton.width+2*(e.windowWidth-menuButton.right);

menuButton.marginRight=e.windowWidth-menuButton.right;//胶囊的右边距。用于设置返回的左边距。对称

// 保存

this.globalData.statusBarHeight =statusBarHeight

this.globalData.menuButton = menuButton;

this.globalData.customNavBarHeight= menuButton.bottom + menuButton.top - statusBarHeight;

}

})

globalData: {

userInfo: null,

//自定义导航相关的

statusBarHeight:null,//状态栏高度

menuButton:null,//胶囊相关数据 @obj,{width,height,top,left,right,bottom}

customNavBarHeight:null,//自定义导航栏的高度【导航栏包括了状态栏】

}

2.组件调用

navBarBfc="{{navBarBfc}}" backStyle="{{backStyle}}" contentText="{{contentText}}">

2.导航栏组件js部分：

属性说明

功能介绍

// components/navigationBar/navigationBar.js

/*

1.支持自定义导航栏类型：是否占据空间，对于页面头部是图片可以采用不占据空间类型，这样图片会从状态栏开始铺开，漂亮

2.支持导航栏背景设置为纯色，渐变色，图片【本地(本地图片要设置绝对定位，因为image标签在这里而不是使用的那个页面)、网络】或颜色背景图都有

3.支持设置内容区的文本(及icon)颜色，避免某些背景色导致看不清内容

4.支持返回类型：传统模式=>无返回，返回上一页，返回首页，返回上一页及首页

新颖模式：自定义卡槽传入，【比如为导航球，点开垂直张开导航内容】

5.标题部分，支持正常的标题显示。或自定义【比如搜索框 等内容】

*/

const app = getApp();

Component({

/**

* 组件的属性列表

* @navBarBfc 导航栏是否塌嵌(bfc):导航栏类型

* false【default】:第一种导航栏：导航栏占据空间

* true:第二种导航栏：导航栏不占据空间，适合头部是图片等情况

*

* @文本及icon颜色

* @textColor://说明，标题颜色和icon颜色

*

* @backStyle 返回方式

* ""：无

* "back"【default】：返回上一页；

* "home"：返回首页;

* "back-home":返回上一页及返回首页

* "new":新颖返回模式【自定义】，需要传卡槽 √

*

* @contentText 标题部分

* 有值：导航文本；

* 为空【default】：其它自定义内容【包括空】，需要传卡槽 √

*

* @背景样式

* @bgClass：采用背景颜色或渐变颜色，传class; 【选填】

* @bgImage：采用背景图片;【选填】

*

*@其它

*还可以传right卡槽

*/

externalClasses: ['bg-class'],

options: {

multipleSlots: true // 在组件定义时的选项中启用多slot支持

},

properties: {

navBarBfc:{

type:Boolean,

value:false,//默认导航栏占据空间

},

textColor:{

type:String,

value:"#222",//默认图标及文本颜色为白色

},

backStyle: {

type: String,

default: "back",//默认返回类型：返回图标

},

contentText: {

type:String,

default: "",//默认标题为空

},

bgImage: {

type: String,

default: '',//默认背景图片木有

},

},

/**

* 组件的初始数据

*/

data: {

statusBarHeight:app.globalData.statusBarHeight,//状态栏高度

menuButton:app.globalData.menuButton,//胶囊相关数据 @obj,{width,height,top,left,right,bottom;及extendWidth}

customNavBarHeight:app.globalData.customNavBarHeight,//自定义导航栏的高度【导航栏包括了状态栏】

},

/**

* 组件的方法列表

*/

methods: {

// 返回上一页

BackPage() {

wx.navigateBack({

delta: 1

});

},

// 返回首页

toHome(){

wx.reLaunch({

url: '/pages/index/index',

})

}

}

})

2.导航栏组件xml部分

style="z-index:2;height:{{customNavBarHeight}}px;padding-top:{{statusBarHeight}}px;padding-right:{{menuButton.extendWidth}}px;font-size:34rpx;color:{{textColor}}">

style="width:{{menuButton.width}}px;height:{{menuButton.height}}px;margin:0

{{menuButton.marginRight}}px;{{menuButton.marginRight}}px;">

|

{{contentText}}

3.导航栏组件css部分

具体开发时，把常用类放到外部去。

返回及首页icon要使用iconfont。因为这部分图标颜色要和字体颜色保持一致，可变。避免某些底色看不清

/* components/navigationBar/navigationBar.wxss */

.customBarBox{

position: fixed;

top:0;

left: 0;

right: 0;

z-index:9999;

/* 网格布局 */

display: grid;

grid-template-areas: 'main';

}

.customBarBoxItem{

grid-area: main;

box-sizing: border-box;

}

/* 返回及首页时样式 */

.back-home{

border: 1px solid grey;

background:rgba(0, 0, 0, 0.15);

border-radius: 10000px;/* 左右半圆 */

}

/* 以下是常用布局类，放在这边好打包 */

/* flex容器常用类 */

.flex{

display: -webkit-flex; /* Safari */

display: flex;

}

/* 排版方向 */

.flex-direction-row{

flex-direction: row;

}

.flex-direction-row-reverse{

flex-direction: row-reverse;

}

.flex-direction-column{

flex-direction: column;

}

.flex-direction-column-reverse{

flex-direction: column-reverse;

}

/* 容器内容排版，带c代表content*/

/* 容器内容水平排版 */

.flex-justifyc-between{

justify-content: space-between;

}

.flex-justifyc-center{

justify-content: center;

}

/* 容器内容垂直排版,仅对多行时生效*/

.flex-alignc-start{

align-content: flex-start;

}

.flex-alignc-between{

align-content: space-between;

}

.flex-alignc-center{

align-content: center;

}

/* 换行 */

.flex-wrap{

flex-wrap: wrap;

align-content: flex-start;/* 默认是stretch则每行底下平分剩余高度空间*/

}

/* 项目s内容排版,带s代表项目s */

.flex-aligns-center{

align-items: center;

}

/* flex项目常用类 */

/* 平均放大，平均缩小 */

.flex-auto,.flex1{

flex:auto;/*1 1 auto*/

}

/* 不放大不缩小，超出会溢出*/

.flex-none,.flex0{

flex:none;/*0 0 auto*/

}

/* 默认,不放大，平均缩小*/

.flex-default{

/*放大比例*/

flex-grow: 0;

/*缩小比例*/

flex-shrink: 1;

/* 主轴空间 */

flex-basis: auto;

}

.flex-2{

flex:2;/*放大比例系数为2,后面缺省为1 auto*/

}

/*多交叉轴自身对齐方式*/

/* flex-start | flex-end | center | baseline | stretch */

.flex-align-self-auto{

align-self: auto;/*默认*/

}

.flex-align-self-start{

align-self: flex-start;

}

.flex-align-self-center{

align-self: center;

}

.flex-align-self-end{

align-self: flex-end;

}

/* 一行多列水平垂直居中,默认水平排版，可由flex-direction来确定排版方向*/

/* 相当于针对该行，项目内容居中 */

.flex-all-center{

justify-content: center;

align-items: center;

}

/* 多行多列水平居中，默认水平排版，可由flex-direction来确定排版方向 */

/* 相当于针对flex容器，容器的居中 */

.flex-alls-center{

justify-content: center;

align-content: center;

}

/* 超出省略号... */

.dots-1{

display:-webkit-box;

-webkit-line-clamp:1;/* 多行改这个数字即可*/

overflow:hidden;/*要设置容器高度，为：line-height*-webkit-line-clamp*/

/* 否则，虽然会出现...。但如果高度较高，底下还是会展示 */

/*如果要文字外层使用padding，则在祖父容器设置padding，父容器设置dots*/

text-overflow:ellipsis;

-webkit-box-orient:vertical;

word-break:break-all;

}

/* 使用iconfont */

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1559543622508'); /* IE9 */

src: url('iconfont.eot?t=1559543622508#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABvAAAAK5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBUIFLATYCJAMMCwgABCAFhG0HPhsZBsgekiQlAQV+AEhsMCQhgmqN7Nnd20dwSA4VkERFGFAx4suHhI3RaHSEYSPyv2vZHyjNllilxGyXkmm6kGk2ZbbAksAeCEnCFdS5e6fOUYp/JfzP5fTu2rxxfstyXIPWGHrUCzAOKNAxJ1kBBcQNYxe8wM0E2o3KJB00dw6Cr8LuFYg3VLeAb8GvKCzVKtSGiQXiIzRa0478FcCH6PvxD/LDFyRNBnvg6esmO9T+7EeEsvz/2U2AQIAApzfIWAYKcdcYv6AIRle0a9Tu3KoIaanQ//9EEkNXD/rHS0QFu7gTzMNE4qefJyL4GXGFBDKoKNgEDiFp8OCQa5QWyYieZsdzxL6/fLAXFQUnt0kB1/eSFFEYfLRillaOTKa9A3D+vK9pQHnnc3ZvQPWhpIwMyeMtJTbtEGVA3icRE+48sDHoNnDwRf1lTJn/R3lZCd4O6vlzmQqVQblevbwI9/vsRy9Dp0IGPWvoJS1YvL5/QYEGHthd01v5AyCPybu/9zfuP1tfD6r83WpSAX7EvjdH+mK4rvXkjuBnSgfWFENuG3LRJJ7EcmYbNxZLaDdc/rPd/V6n64YGFxNaDWWQtBiBrNU0WkjL0OiwClWrbWi3pGV6hwGcIoofsGgDQOj1DEm375D1+oYW0gs0hv2EqjcUaHcWYQt2mA2qNXBsEdiOrDOI2pibuCahxaX9WJ9wWnheHnGHMffQEMrLzi2nWrAb8yWGeCb1fCEIIpy5UDPYDjudDBmcjWGbyB4VwijPySFNb8q2MRdo9nGYhYDZIVYzEMqGcSNBY0GrfL4fppvgZME7cHXxYRjnQVtH8mTLHYC2aNyDcI9yjcckXT5BIBCCY1yQZmDFnE6cQYzmdmMwGyHb6ISooVwOqkeGarK317n+bxO0s3fIIUuKpELrE7WwcerW/WJbHgAAAAA=') format('woff2'),

url('iconfont.woff?t=1559543622508') format('woff'),

url('iconfont.ttf?t=1559543622508') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('iconfont.svg?t=1559543622508#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

font-family: "iconfont" !important;

font-size: 26px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* 返回 */

.icon-biaoqing:before {

content: "\e609";

}

/* 首页 */

.icon-biaoqing1:before {

content: "\e615";

}