微信导航条html,微信小程序 自定义导航栏（1）(示例代码)

1.在app.json中     window配置navigationStyle

2.计算相关值

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect()获取胶囊按钮的信息  和 wx.getSystemInfo()获取设备信息

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。

App.js 代码如下：

3.头部组件navBar

navBar.wxml

{{pageName}}

navBar.wxss

.navbar{width:100%;overflow:hidden;position:relative;top:0;left:0;z-index:10;flex-shrink:0;background:#fff;

}.navbar_left{display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;position:absolute;left:10px;z-index:11;line-height:1;padding:3px;border:1rpx solid #f0f0f0;border-radius:40rpx;overflow:hidden;background:rgba(255,255,255,0.6);

}.navbar_left view{width:50rpx;height:50rpx;margin-right:10rpx;

}.navbar_left view image{width:100%;height:100%;

}.nav_line{border-left:1rpx solid #f0f0f0;padding-left:8px;

}.navbar_title{width:100%;box-sizing:border-box;padding-left:115px;padding-right:115px;height:32px;line-height:32px;text-align:center;position:absolute;left:0;z-index:10;color:#333;font-size:16px;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;

}

navBar.js

const App =getApp();

Component({/**

* 组件的属性列表*/properties: {

pageName: String,//中间的title

showNav: { //判断是否显示左上角的按钮

type: Boolean,

value:true},

showHome: {//判断是否显示左上角的home按钮

type: Boolean,

value:true}

},/**

* 组件的初始数据*/data: {

showNav:true, //判断是否显示左上角的home按钮

showHome: true, //判断是否显示左上角的按钮

},

lifetimes: {//生命周期函数，可以为函数，或一个在methods段中定义的方法名

attached: function() {this.setData({

navHeight: App.globalData.navHeight,

navTop: App.globalData.navTop

})

}

},/**

* 组件的方法列表*/methods: {//回退

navBack: function() {

wx.navigateBack()

},//回主页

navHome: function() {

wx.navigateTo({

url:\'/pages/home/home\'})

},

}

})

navBar.json

4.index中

index.json

index.wxml

跳转

index.js

5.demo1中

demo1.wxml

demo.js

6.home页

home.wxml

home.js

最后效果图：