微信小程序——自定义导航栏
微信头部导航栏可能通过json配置：
但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示：
现在具体说一下实现步骤及方法：
步骤：
1.在 app.json里面把"navigationStyle"设置为"custom"
这样子之后就只会保留右上角胶囊按钮了。
2.在app.js中通过wx.getSystemInfo()获取头部导航条的高度，因为在不同的手机型号头部那条栏目高度可能不一致。
App({onLaunch: function () {wx.getSystemInfo({success: res => {//导航高度this.globalData.navHeight = res.statusBarHeight + 46;}, fail(err) {console.log(err);}})}})
3.因为这个头部导航是公共的，所以我们最好把它设置成一个组件，命名为navbar
index.wxml
<!--components/navbar/index.wxml--><view class="navbar" style='height:{{navH}}px'><view class="navbar-action-wrap {{showHome ? 'navbar-action-group' : ''}} row item-center" wx:if="{{showNav}}"><block wx:if="{{showHome}}"><ss-icon name="back" color="#333" size="15px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon><ss-icon name="index" color="#333" size="16px" custom-class="navbar-action_item" bind:click="toIndex" ></ss-icon></block><block wx:else><ss-icon name="back" color="#fff" size="18px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon></block></view><view class='navbar-title'>{{pageName}}</view></view>
index.js
/ components/navbar/index.jsconst App = getApp();Component({options: {addGlobalClass: true,},/*** 组件的属性列表*/properties: {pageName:String,showNav:{type:Boolean,value:true},showHome: {type: Boolean,value: true}},/*** 组件的初始数据*/data: {},lifetimes: {attached: function () {this.setData({navH: App.globalData.navHeight})}},/*** 组件的方法列表*/methods: {//回退navBack: function () {wx.navigateBack({delta: 1})},//回主页toIndex: function () {wx.navigateTo({url: '/pages/admin/home/index/index'})},}})
index.wxss:
/* components/navbar/index.wxss */.navbar {width: 100%;overflow: hidden;position: relative;top: 0;left: 0;z-index: 10;}.navbar-title {width: 100%;height: 46px;line-height: 46px;text-align: center;position: absolute;bottom: 0;left: 0;z-index: 10;background-color: #fff;color: #333;font-size: 30rpx;}.navbar-action-wrap{position: absolute;left: 10px;bottom: 7px;z-index: 100;line-height: 1;padding-top: 4px;padding-bottom: 4px;}.navbar-action-group { border:1px solid #e8e8e8;border-radius: 20px;overflow: hidden}.navbar-action_item{padding:3px 0;color: #333;}.navbar-action-group .navbar-action_item{border-right: 1px solid #e8e8e8;padding:3px 12px;}
index.json:
{"component": true,"usingComponents": {"ss-icon": "/components/icon/index"}}
ss-icon 是我自定义的一个 icon 组件，如果你没有这个组件，可以在我使用<ss-icon></ss-icon>的地方换成<view></view>组件，然后里面放入你的图标就可以了。
对于组件不太明白的，可以看下微信小程序组件相关组件的介绍。
组件已创建完毕，现在说下该组件的使用方法：
假设我们需要在index.wxml中需要调用这个组件，
1.在index.json中引用该组件：
{"usingComponents": {"navbar": "/components/navbar/index"}}
2.在index.wxml中使用该组件：
<view class='view-page'><navbar page-name="你当前页面的名字"></navbar><view class='page-content' style='height:calc(100vh - {{navH}}px)'><!--这里放你的内容--></view></view>
3.通过index.wxss布局:
page {height: 100%;position: relative;overflow: hidden;box-sizing: border-box;}.view-page {height: 100%;width: 100%;left: 0;top: 0;box-sizing: border-box;position: absolute;overflow: hidden;}.page-content {box-sizing: border-box;position: relative;overflow-y: auto;}
4.在index.js中获取全局的navH的值:
//获取应用实例const App = getApp();Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let _this = this;_this.setData({navH: App.globalData.navHeight})},})
最后的结如下图所示：
