微信小程序 自定义顶部标题栏

先看效果

header.png

微信小程序开发，从不支持自定义导航栏，到支持全局自定义导航栏，再到现在的支持单页面配置，微信也在一步一步的完善。

全局自定义导航栏

app.json

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "wx",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

⚠️ "navigationStyle": "custom" === 这样设置所有页面都需要引入自定义导航。

单页面自定义导航栏

index.json

{
  "usingComponents": {
    "navigation":"../../components/navbar/navbar"
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

⚠️ "navigation":"../../components/navbar/navbar" === 自定义导航页面路径，👇
⚠️ "navigationStyle": "custom" === 这样设置当前页面需要引入自定义导航。
⚠️ "navigationBarTextStyle": "white" === 手机状态栏 目前只有（white/black）

上述操作取消了微信默认的导航，下面需要我们自定义导航组件来完善页面。在此之前需要拿到原本导航的高度，主要在app.js中操作

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    const systemInfo = wx.getSystemInfoSync(); //获取系统信息
    const menuInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮的信息
    this.globalData.menuHeight = menuInfo.height; // 获取胶囊按钮的高
    this.globalData.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高
    this.globalData.menuRight = menuInfo.right; // 获取胶囊按钮的距离屏幕最右边的距离（此处用于设置导航栏左侧距离屏幕的距离）
    this.globalData.navBarHeight = (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height; // 计算出导航栏的高度
  },
  globalData: {
    navBarHeight:0,// 导航栏高度
    menuHeight:0,//胶囊按钮 高度
    statusBarHeight:0,//状态栏高度
    menuRight:0,//胶囊按钮 距离屏幕右边的距离
  }
})

目录结构

-- components    // 公共组件
  -- navbar   // 自定义导航组件
    -- navbar.js
    -- navbar.json
    -- navbar.wxml
    -- navbar.wxss
-- pages    // 页面
  -- index   // 需要引入自定义导航的页面
    -- index.js
    -- index.json
    -- index.wxml
    -- index.wxss

自定义导航组件

navbar.wxml

<view class="navigationPage {{defaultSetting.size}}" style="height: {{height}}px;background-color:{{defaultSetting.backgroundColor}}">
  // 手机状态栏的高度
  <view style="height:{{statusBarHeight}}px;width: 100%;"></view>
  // 导航高度
  <view style="height: {{navBarHeight}}px;width: 100%;" class="head">
    <view class="navigationIcon" bindtap="bindCallBack">
      返回
    </view>
    <view class="navigationTitle">
      {{defaultSetting.title}}
    </view>
  </view>
</view>
// 空白view元素占用高度
<view style='height: {{height}}px'></view>

⚠️问题：一般在自定义导航页面会出现下拉页面，导航栏也随着会下拉。
解决：设置 fixed 后页面元素整体上移了 height，所以在此组件里设置一个空白view元素占用最上面的 height 这块高度。

navbar.wxss

.navigationPage{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  background-color:red;
  text-align:center;
  box-sizing: content-box;
}
.head{
  display: flex;
  align-items: center;
  color: #FFF;
}
.navigationIcon{
  position: absolute;
  left:30rpx;
}
.navigationTitle{
  font-weight:600;
  flex:1;
}
.small{
  font-size:14px;
}
.default{
  font-size:16px;
}
.large{
  font-size:18px;
}

navbar.js

const app = getApp();
Component({
  //接收 外部传入到属性值
  properties:{
    defaultSetting:{
      type:Object,
      value:{
        title:'默认标题',
        height:20,
        paddingTop:0,
        backgroundColor:'#124233',
        size:'default'
      }
    },
  },
  // 定义响应式数据
  data:{
    height:app.globalData.navBarHeight + app.globalData.statusBarHeight,
    statusBarHeight:app.globalData.statusBarHeight,
    navBarHeight:app.globalData.navBarHeight,
  },
  // 定义方法
  methods:{
    bindCallBack(){
      wx.navigateBack({
        delta: 1,
      });
    }
  }
})

navbar.json

{
  "component": true,
  "usingComponents": {}
}

自定义导航基本可以，下面在页面中引入并使用
index.wxml

<navigation defaultSetting="{{navigationSetting}}"></navigation>
<view>
  home page
</view>

index.json

{
  "usingComponents": {
    "navigation":"../../components/navbar/navbar"
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

index.js

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navigationSetting:{
      title:'自定义标题',
      height: app.globalData.navBarHeight,
      paddingTop: app.globalData.statusBarHeight,
      backgroundColor:'red',
      size:'default'
    }
  },

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

  },
})

OK，完事。大家有任何问题都可以提出来，欢迎评论！