自定义微信导航栏

custom.gif

在app.json - window 中开启自定义配置

"navigationStyle" : "custom"

app.json.png

首页的代码：

custom.js

  /**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight,
    pos: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * tab选择事件
   */
  tabSelect: function (e) {
    this.setData({
      pos: e.currentTarget.dataset.pos
    })
  },

custom.json

{
  "enablePullDownRefresh": true
}

custom.wxml

<view class='status-bar'>
  <view class='tabar' style='padding-top:{{bar_Height}}px;'>
    <text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
    <text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
  </view>
</view>

custom.wxss

.status-bar {
  width: 100%;
  background-color: #fdd901;
}

.tabar {
  display: flex;
  justify-content: center;
}

.tabar text {
  padding: 25rpx 30rpx;
  color: #353535;
  font-size: 12pt;
}

.tabar .active {
  color: #fff;
}

个人中心代码：

mine.js

  /**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight
  },

mine.wxml

<view class='tabar' style='top:{{bar_Height}}px;'>
  <view>个人中心</view>
</view>

mine.wxss

.tabar {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  text-align: center;
  font-size: 12pt;
  color: #fff;
  background-color: #6cbc72;
}

.tabar view {
  padding: 25rpx 0rpx;
}

虽然自定义效果还不错，但是要注意进行微信版本的兼容问题，window.navigationStyle 只能支持 6.6.0 以上微信版本，对应基础库版本为 1.9.1。如果需要针对低版本微信进行兼容，要做好兼容性适配。

感觉有一点不好的地方是，一旦开启了自定义，每个页面都要用自定义的导航栏，这就很无奈。比较适合页面数量较少的小程序中，页面较多最好使用<template>进行统一的顶部布局。