摘要：
第一步：在app.json中设置目前微信小程序不支持单个页面设置，一旦决定要使用自定义导航栏后，那么每个页面都需要设置导航栏组件目录：index.wxml文件˂!',cancelColor:'#909399',confirmColor:'#3888FF',success:function{if{wx.navigateBack()}}})return;}wx.navigateBack()},//返回到首页_backhome(){wx.switchTab}}})app.js文件Appapp.wxss文件page{position:relative;z-index:9999998;}自此，导航栏组件已搭建完成，让我们来使用它吧在小程序页面中：index.wxml文件˂!
第一步：在app.json中设置
目前微信小程序不支持单个页面设置，一旦决定要使用自定义导航栏后，那么每个页面都需要设置
导航栏组件目录：
index.wxml 文件
<view class='nav-wrap' style='height: {{height*2 + 20}}px;'> <!--导航栏 中间的标题 --> <view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view> <view style='display: flex; justify-content: space-around;flex-direction: column'> <!--导航栏 左上角的返回按钮 和home按钮 --> <!--其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 --> <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'> <!--左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示 --> <!--从分享进入小程序时 返回上一级按钮不应该存在 --> <view bindtap='_navback' wx:if='{{!share}}'> <image src='/common/image/nav-back.png' mode='aspectFit' class='back-pre'></image> </view> <!--<view wx:if='{{share}}'></view> --> <view bindtap='_backhome' wx:if='{{share}}'> <image src='/common/image/nav-home.png' mode='aspectFit' class='back-home'></image> </view> </view> </view> </view>
index.wxss 文件
/*顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */.nav-wrap {position:fixed;width:100%;top:0;background:#fff;color:#000;z-index:9999999; } /*标题要居中 */.nav-title {position:absolute;text-align:center;max-width:400rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;right:0;bottom:0;margin:auto;font-size:30rpx;color:#2c2b2b;font-weight:normal; } .nav-capsule {display:flex;align-items:center;margin-left:30rpx;width:140rpx;justify-content:space-between;height:100%; } .navbar-v-line {width:1px;height:32rpx;background-color:#e5e5e5; } .back-pre, .back-home {width:36rpx;height:36rpx;margin-top:8rpx;padding:10rpx; }.nav-capsule .back-home {width:36rpx;height:40rpx;margin-top:3rpx; }
index.json文件（自定义组件必须）
{ "component": true}
index.js 文件
const app =getApp() Component({ properties: { navbarData: { //navbarData 由父页面传递的数据，变量名字自命名 type: Object, value: {}, observer: function(newVal, oldVal) {} } }, data: { height: '', //默认值 默认显示左上角 navbarData: { showCapsule: 1} }, attached: function() { //获取是否是通过分享进入的小程序 this.setData({ share: app.globalData.share }) //定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { //返回上一页面 _navback(event) { //当前页面为“编辑收货地址”时，对返回按钮进行劫持 if(this.data.navbarData.pageName === 'edit-address'){ wx.showModal({ content: '当前页面尚未保存，是否确认返回？', cancelColor: '#909399', confirmColor: '#3888FF', success: function(res){ if(res.confirm){ wx.navigateBack() } } }) return; } wx.navigateBack() }, //返回到首页 _backhome() { wx.switchTab({ url: '/pages/home/home', }) } } })
app.js 文件
App({ onLaunch: function(options) { //判断是否由分享进入小程序 if (options.scene == 1007 || options.scene == 1008) { this.globalData.share = true} else{ this.globalData.share = false}; //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度） wx.getSystemInfo({ success: (res) =>{ this.globalData.height =res.statusBarHeight } }) }, globalData: { appid: "xxxxxxxxx", share: false, //分享默认为false height: 0 //导航栏高度 } })
app.wxss 文件
page{position:relative;z-index:9999998; }
自此，导航栏组件已搭建完成，让我们来使用它吧
在小程序页面中：
index.wxml 文件
<!--引入自定义组价。'navbar-data'中navbar是自定义名字，决定了组件中'navbarData'的名字 --> <nav-bar navbar-data='{{nvabarData}}'></nav-bar> <view style='margin-top: {{height}}px'> </view>
index.json 文件
{ "usingComponents": { "nav-bar": "/components/navbar/index"} }
index.js文件
//获取应用实例 const app =getApp() Page({ data:{ //组件所需的参数 nvabarData: { showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示 title: '我的页面', //导航栏 中间的标题 }, height: app.globalData.height * 2 + 20 //此页面 页面内容距最顶部的距离 } }