【微信小程序】自定义导航栏

0.背景

最近在写一个微信小程序，然后就是想要修改顶部导航栏，通过阅读微信官方文档发现，可以进行自定义导航栏，具体可见：全局配置 | 微信开放文档 (qq.com)。

1.创建步骤

1.1 开启自定义导航栏配置

首先通过阅读文档发现，如果想要自定义导航栏的话，需要修改一个配置navigationStyle。导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。

然后我们就在app.json中添加上此配置：

{
    "pages": [],
    "window": {
        "navigationStyle": "custom"
    },
}

1.2 导航栏高度

因为不同型号的设备的屏幕大小不同，那么也就意味着我们的导航栏需要进行适配。我们可以通过wx.getSystemInfo 和 wx.getSystemInfoSync  获取机器信息，进而可以获取设备的屏幕信息。screenHeight - windowHeight 计算标题栏高度。

wx.getSystemInfoSync().statusBarHeight		// 获取手机状态栏高度

1.3 编写comment

这里app.json配置影响的全局配置，所以其他页面都成了自定义导航，只有写一个公共组件或者模板套用了（随你挑选一个），这里我选择component构造器。

编写JS

Component({
    /* 组件的属性列表 */
    properties: {
      title: {			// 设置标题
        type: String,
        value: ''	
      },
      cover_state: {	 // 控制页面padding-top
        type: Boolean,
        value: false
      },
      show_bol: {			// 控制返回箭头是否显示
        type: Boolean,
        value: false
      },
      my_class: {			// 控制样式
        type: Boolean,
        value: false
      }
    },
    /* 组件的初始数据 */
    data: {
      type: "组件",
      bar_Height: wx.getSystemInfoSync().statusBarHeight		// 获取手机状态栏高度
    },
    /* 组件的方法列表 */
    methods: {
      goBack: function () {					// 返回事件
        console.log("退后")
        wx.navigateBack({
          delta: 1,
        })
      }
    }
  })
  

编写WXML

<view style="padding-top:{{cover_state ? bar_Height + 44 : 0}}px;">
 <view class='status-bar'>
    <view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{show_bol}}'>
      <view class="backIcon">
        <!-- <image src='/images/back.png'></image>  -->
        返回
      </view>
    </view>
    <view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;">
      <text class="red">{{title}}</text>		
    </view>
  </view>
</view>

1. hidden='{{show_bol}}'
   这里的show_bol就是用来控制是否显示返回标签（说白了就是是内页还是首页，该不该有返回功能）
2. padding-top:{{bar_Height}}px
   bar_Height为获取到的手机状态栏的高度；

最外层再加一层< view > 来占据padding的位置，适配所有页面，加上cover_state控制是否需要，如果顶部导航需要透明则设为false

编写WXSS

/* 顶部导航 */
.status-bar {
    width: 100%;
    /* height: 180rpx; */
    z-index: 99999;
    position: fixed;
    top: 0;
    background-color: white;
    background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
  }
  .goBack{
    position: absolute;
    top: 15rpx;
    font-size:12pt;
  }
  .goBack image{
    width: 21rpx;
    height: 40rpx;
    padding: 12rpx 20px 0 30rpx;
  }
  .tabar {
    display: flex;
    justify-content: center;
    /* background-color: #fff; */
  }
  .tabar2{
    background: transparent !important;
    /* background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB); */
  }
  .tabar2 text{
    color: #fff !important;
    font-weight: lighter !important;
  }
  .tabar text {
    height: 44px;
    line-height: 44px;
    padding: 0 30rpx;
    color: white;
    /* color: #353535; */
    font-size: 12pt;
    font-weight: bold;
  }
  .tabar .active {
    color: #fff;
  }
  .backIcon{
      width: 130rpx;
      height: 50rpx;
      border: #ccc solid 1rpx;
      margin-left: 20rpx;
      border-radius: 20rpx;
      color: #ccc;
      text-align: center;
      line-height: 48rpx;
  }

2. 使用组件

下面演示在首页使用自定义导航栏。

2.1 JSON

{
    "usingComponents": {
        "navigationBar": "/component/navigationBar/navigationBar"
      },
}

2.2 WXML

<!--index.wxml-->
<navigationBar title='Java 求职助手' show_bol='{{true}}'></navigationBar> 
<view class="container" style="padding-top:{{bar_Height + 45}}px;">
    <!-- 顶部搜索栏 -->
    <view class="page-header">
        <van-search value="{{ value }}" 
        placeholder="大哥直接搜索不香嘛？" 
        shape="round"
        bind:click-input="toSearchPage" />
    </view>
 ......

.......

这里导航栏会有个问题，导航肯定是要固定定位的，所以他就脱离了文档流，组件放进去后，会悬浮在上面，遮挡了下面的内容，这时候就需要给父元素加个padding-top了，所以需要给 navigationBar标签下的标签添加style属性：padding-top:{{bar_Height + 45}}px;

到这里，自定义导航栏就完成了。

微信关注

编程那点事儿