小程序自定义导航栏

产品需要自定义的导航菜单
如图
*

1. app.json文件设置自定义导航样式为"custom"
   
   2.将导航制作成组件
   这里高度需要根据设备适应
   设置全局高度变量
   app.js

navigation.wxml

<view class="navbar" style='height:{{navH}}px'>
    <view class="navbar-action-wrap  {{showHome ? 'navbar-action-group' : ''}} row item-center" wx:if="{{showNav}}">
            <image src="../../images/nav_back_icon.png" bindtap="goBack"></image>
            <image src="../../images/nav_home_icon2.png" bindtap="goHome"></image>
    </view>
    <view class='navbar-title'>
        {{pageName}}
    </view>
</view>

navigation.js

const App = getApp();

Component({
    options: {
        addGlobalClass: true,
    },
    /**
     * 组件的属性列表
     */
    properties: {
        pageName: {
            type: String,
            value: '兼客'
        },
        showNav: {
            type: Boolean,
            value: true
        },
        showHome: {
            type: Boolean,
            value: true
        }
    },

    /**
     * 组件的初始数据
     */
    data: {},
    lifetimes: {
        attached: function () {
            this.setData({
                navH: App.globalData.navHeight
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        goBack() {
            wx.navigateBack({
                delta: 1
            })
        },
        goHome() {
            wx.switchTab({url: '/pages/index/index'});
        },
    }
})

navigation.wxss

/* components/navbar/index.wxss */
.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}


.navbar-title {
  width: 100%;
  height: 92rpx;
  line-height: 92rpx;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #fff;
  color: #333;
  font-size: 30rpx;
}

.navbar-action-wrap{
  position: absolute;
  left: 20rpx;
  bottom: 14rpx;
  z-index: 100;
  line-height: 1;
  padding-top: 8rpx;
  padding-bottom: 8rpx;
}
.navbar-action-group {
  border:2rpx solid #e8e8e8;
  border-radius: 40rpx;
  overflow: hidden
}
.navbar-action_item{
  padding:6rpx 0;
  color: #333;
}
.navbar-action-group .navbar-action_item{
  border-right: 2rpx solid #e8e8e8;
  padding:6rpx 24rpx;
}
.navbar-action-wrap image {
  width :35rpx;
  height: 35rpx;
  margin: 5rpx 22rpx;
}

navigation.json

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

用法:
1.全局注册组件
修改app.json 文件

2.在页面中使用组件

<navigation page-name="页面标题"></navigation>

3.单页面设置默认导航样式

文章参考:https://www.cnblogs.com/sese/p/9761713.html