小程序自定义narbar样式

• 最近遇到了项目需要自定义navbar,下面来介绍下具体的步骤
• 在当前页面的.json文件里进行配置(如果在全局的.json文件中配置的,则所有的页面中小程序自带的navbar样式都没有了)
  

"navigationStyle": "custom"

• 定义一个组件
  
• app.js
• 获取胶囊的位置信息

//app.js
App({
  globalData: {},
  onLaunch: function () {
    /******获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 *******/
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    console.log('menuButtonObject',menuButtonObject)
    /****获取当前设备信息 ******/
    wx.getSystemInfo({
      success: res=> {
        console.log('res',res)
        // statusBarHeight:状态栏的高度
        let statusBarHeight = res.statusBarHeight
        // navTop:胶囊距离顶部的位置
        let navTop = menuButtonObject.top
        // navHeight:整个导航栏的高度
        let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        // windowHeight:可使用窗口的高度
        this.globalData.windowHeight = res.windowHeight;
        // 胶囊:距离左边的距离
        this.globalData.navRight = res.windowWidth-menuButtonObject.right;
        // 胶囊高度
        this.globalData.capsuleHeight=menuButtonObject.height
      }
    })
  }

})

• navbar.wxml

<view class="navbar" style='height:{{navHeight}}px'>
    <view class="icon navbar-action-group " style='left:{{navRight}}px;top:{{navTop}}px;height:{{capsuleHeight}}px;line-height:{{capsuleHeight}}px'>
        <view class="navImg navbar-action_item border">
            <image src="../../status/image/home.png" class="image"></image>
        </view>
        <view class="navImg navbar-action_item">
            <image src="../../status/image/home.png" class="image"></image>
        </view>
    </view>
    <view class="navbar-title" style='top:{{navTop}}px'>导航栏</view>
</view>

• navbar.wxss

/* components/navbar/navbar.wxss */
.navbar{
    position: fixed;
    left: 0;
    top: 0;
    /* border: 1px solid red; */
    width: 100%;
    box-sizing: border-box;
}
.icon{
    /* border: 1px solid red; */
    position: absolute;
    text-align: center;
    display: flex;
    padding: 0 10px;
}
.navbar-action-group {
    border: 1px solid #f0f0f0;
    border-radius: 20px;
}    
.navbar-action-wrap{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    left: 10px;
    z-index: 11;
    line-height: 1;
    padding-top: 4px;
    padding-bottom: 4px;
}
.navImg{
    width: 15px;
    height: auto;
    /* overflow: hidden; */
  }
  .navImg image{
    width: 100%;
    height: 15px;
  }
  .navbar-action_item {
    padding: 0px 8px;
    color: #333;
  }
  .border{
      border-right: 1px solid #f0f0f0;
  }
  image{
    display: inline-block;
    overflow: hidden
  }
  .navbar-title {
    width: 100%;
    box-sizing: border-box;
    padding-left: 115px;
    padding-right: 115px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    left: 0;
    z-index: 10;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

• navbar.js

// components/navbar/navbar.js
var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    navHeight:'',
    navTop:'',
    navRight:'',
    capsuleHeight:'',
    navIcon:''
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop,
        navRight:App.globalData.navRight,
        capsuleHeight:App.globalData.capsuleHeight
      });
      console.log('navHeight',this.data.navHeight)
      console.log('navRight',this.data.navRight)
    },

  },
  
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

• pages/index.wxml

<!--index.wxml-->
  <nav-bar></nav-bar>
<view class="container" style='margin-top:{{navHeight}}px'>
  1111111111111111
  <view class="home"></view>
</view>

• pages/index.wxss

.home{
 height: 1500rpx;
 width: 100%;
 box-sizing: border-box;
}

• pages/index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    navHeight:app.globalData.navHeight,
  },
  
  onLoad: function () {
    
  },
  onReachBottom(){
    console.log('到底了')
  }
})

• pages/inde.json

{
  "usingComponents": {
    "nav-bar":"/components/navbar/navbar"
  },
  "navigationStyle": "custom"
}