微信小程序手把手教你实现自定义导航栏

前言

熟悉微信小程序(文章后面统称小程序)开发的朋友们应该知道，原生提供的导航栏除了能修改背景颜色和标题之外，对布局的修改和拓展并不支持。原生的导航栏如下：

我们很多的小程序可能都是从app移植过去的，在原生app(Android/iOS)上我们能对导航栏做一些自定义的布局来实现我们的需求，很显然原生提供的导航栏不能做到这点，所以我们需要自定义导航栏。今天我们就通过自定义导航栏实现如下效果：

看完效果图，接下来我们就开始动手实现了。
$\color{red}{(注：由于小程序限制，我们没法去掉右侧的胶囊按钮，没法做到完全的自定义，}$
$\color{red}{胶囊按钮左侧的一大块区域我们都可以自定义成我们想要的布局)}$

实现思路和步骤

• 去掉原来的导航栏
• 自定义导航栏布局
• 设置导航栏高度（跟原导航栏一样高）
• 绑定事件，实现逻辑

去掉原来的导航栏

这一步很简单，只需要在所在页面的json文件中做如下配置：

// json文件
"window":{
  "navigationStyle": "custom"
}

自定义导航栏布局

我的页面布局必须是竖向排列，然后将我们自定义导航栏布局放到顶部，具体请看代码：

// wxml文件
<view class='page'>
  <view class='nav' >
    <view class='title-view'>
      <view class='title'>南昌市</view>
      <image class='title-img' src='../../images/arrow_icon.png'></image>
    </view>
  </view>
</view>

// wxss文件
//整个页面竖向布局
.page {
  display: flex;
  flex-direction: column;
  padding-bottom: 120rpx;
}
//设置导航栏固定布局，放置跟随页面滚动
.nav {
  width: 100%;
  overflow: hidden;
  position: fixed;
  background: #1296DB;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
}
//中间title外层布局
.title-view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
//中间title布局
.title {
  color: white;
  font-size: 30rpx;
  font-weight: bold;
}
//title旁边箭头
.title-img {
  width: 25rpx;
  height: 15rpx;
  margin-left: 10rpx;
}

上面的代码都是带有注释的，相信大家都能看懂，接下来我们就看下效果：

很显然这个效果没有达到我们文章开头展示的那样，那是因为我们还有一些工作还没有完成，接下来我们继续。

设置导航栏高度

首先在app.js中的globalData中设置两个属性：

// app.js文件
globalData: {
	...
    navHeight: 0,//导航栏高度
    statusBar: 0,//状态栏高度
    ...
  }

自定义一个函数给globalData中的属性赋值：

// app.js文件 
  getSystemInfo: function () {
    let t = this;
    wx.getSystemInfo({
      success: function (res) {
        t.globalData.systemInfo = res;
        //导航高度
        t.globalData.navHeight = res.statusBarHeight + 46;//46px是官方规定的导航栏高度
        t.globalData.statusBar = res.statusBarHeight;
      }
    });
  }

然后在app.js的onLaunch中调用这个函数。最后在自定义导航栏的页面的js文件onLoad函数中通过setData赋值给页面：

// 自定义导航栏页面js文件 ，data中先要设置下面两个属性
  const app = getApp();//js文件最上面定义
  this.setData({
      navH: app.globalData.navHeight,
      statusBarHeight: app.globalData.statusBar
    })

最后在页面中通过style动态赋值高度：

<view class='page'>
  <!--nav view start-->
  <view class='nav' style='height:{{navH}}px'>
  	//下面是给标题的顶部设置一个状态栏高度的间距，防止标题太靠顶部
    <view class='title-view' style='margin-top:{{statusBarHeight}}px'>
      <view class='title'>南昌市</view>
      <image class='title-img' src='../../images/arrow_icon.png'></image>
    </view>
  </view>
</view> 

到这里我们的布局工作就完成了，看下最终效果吧：

扫描二维码关注公众号，回复： 9370171 查看本文章

绑定事件，实现逻辑

通过上面几步，我们成功实现了我们自定义导航栏所要求达到的效果。然后你就可以尽情的bindtap，来实现我们自己的业务逻辑，相信这里大家都是会的啦。

尾巴

本文实现的自定义导航栏较为简单，你完全可以按照这个思路实现更加复杂的自定义导航栏。今天就到这里了，希望今天的文章能对读者有所帮助（助人为快乐之本么，哈哈）。下篇，通过本次自定义导航栏的bindtap，我将带大家实现带索引的城市选择列表：
微信小程序手把手教你实现带字母索引的城市选择列表
如果你喜欢我的文章，欢迎给我留言、点赞，谢谢！