微信小程序导航栏自定义

微信小程序缺省的导航栏既不够美观，又没有特色，相信很多人都希望能够拥有一个既美观又有特色的小程序导航栏。刚好公司有个项目需要开发一款小程序对公司开发的产品进行设置。不多说，直接介绍如何自定义美观又有特色的导航栏。

1、在app.json文件中，增加如下两处代码：

    1）、       "navigationStyle": "custom"

    2）、 "usingComponents": {

    "navigation-bar": "/navigationbar/navigationbar"

  }

如下图所示：

2、在app.js文件中增加如下两处代码：

        1）

    const systemInfo = wx.getWindowInfo();

    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

    this.globalData.navBarHeight = systemInfo.statusBarHeight + 60;

    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;

    this.globalData.menuTop = menuButtonInfo.top;

    this.globalData.menuHeight = menuButtonInfo.height;

        2）

   navBarHeight: 0,

    menuRight : 0,

    menuTop: 0,

    menuHeight : 0,

3、在index.wxml文件中增加如下代码：

<navigation-bar default-data="{{defaultData}}"></navigation-bar>

4、最后，开发属于自己的导航栏Components，文件如下所示：

navigationbar.js：

// navigationbar/navigationbar.wxml.js
const app = getApp()
Component({
    properties: {
        // defaultData（父页面传递的数据-就是引用组件的页面）
        defaultData: {
            type: Object,
            value: {
                title: "雾化器设置"
            },
            observer: function(newVal, oldVal) {}
        }
    },
    data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuTop: app.globalData.menuTop,
        menuHeight: app.globalData.menuHeight,
    },
    attached: function() {},
    methods: {}
})

navigationbar.json

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

navigationbar.wxml

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
<image style="position:absolute; left:40rpx;top:90rpx;width:472rpx;height:90rpx" src="../icon/logo.png"></image>

</view>
<view style="height:{{navBarHeight}}px;"></view>

navigationbar.wxss

/* navigationbar/navigationbar.wxml.wxss */

.nav-bar{ position: fixed; width: 100%; top: 0; color: rgb(41, 40, 40); background: #fff;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

至此，您就可以拥有属于自己的导航栏了。