微信小程序自定义导航栏组件

效果图

 首先要先在 json文件里加上 "navigationStyle":"custom", 这句，去掉原生的自定义导航栏

一、子组件-wxml

<view style="height:{{statusHeight+navHeight}}px" hidden="{{header.hiddenBlock}}"></view>
<view class="topbar" style="background:{{header.headerbg}}">
    <view class="status" style="height:{{statusHeight}}px;"></view>
    <view class="navbar" style="height:{{navHeight}}px;">
        <block wx:if="{{header.slot}}">
            <slot></slot>
        </block>
        <block wx:else>
            <view class="navbar_home" wx:if="{{header.homeCapsule}}"
                style="background: {{header.capsulebg}};border:{{header.capsuleborder}}">
                <image src="../../assets/images/goback-arrow.png" bindtap="backClick"
                    style="border-right:{{header.capsulesep}}" />
                <image src="../../assets/images/goindex-arrow.png" bindtap="homeClick" />
            </view>
            <view class="navbar_back" bindtap="backClick" wx:else>
                <image src="../../assets/images/goback-arrow.png"></image>
            </view>
            <view class="navbar_title" style="height:{{navHeight}}px">
                <view style="color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}</view>
            </view>
        </block>
    </view>
</view>

 二、子组件-js

/* eslint-disable no-lonely-if */
// components/navbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    header: {
      type: Object,
      value: {
        homeCapsule: false,
        headerbg: '#fff',
        title: '',
        fontColor: '#000',
        fontSize: '16px',
        hiddenBlock: false,
        capsulebg: 'rgba(0,0,0,0.2)',
        capsuleborder: '1px solid rgba(0,0,0,0.1)',
        capsulesep: '1px solid rgba(255,255,255,0.2)',
        slot: false
      }
    },
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent('customBackReturn')
      } else {
        // getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
        // 注意：不要尝试修改页面栈，会导致路由以及页面状态错误
        if (getCurrentPages().length === 1) {
          wx.navigateTo({
            url: '/pages/index/index'
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    },
    homeClick() {
      // wx.navigateTo({
      //   url: '/pages/index/index'
      // })
      wx.navigateBack({
        delta: 1
      })
    }
  },
  // attached 在组件实例进入页面节点树时执行
  attached() {
    const self = this
    wx.getSystemInfo({
      success(res) {
        const isIos = res.system.indexOf('iOS') > -1
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})

三、子组件-css 

.topbar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.status {
    width: 100%;
}

.navbar {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.navbar_back {
    padding: 0 32rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.navbar_back image {
    width: 21rpx;
    height: 34rpx;
}

.navbar_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

.navbar_title view {
    width: 40%;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 38rpx;
}

.navbar_home {
    padding: 10px 0;
    margin-left: 32rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 40rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.navbar_home image:first-child {
    width: 21rpx;
    height: 34rpx;
    padding: 0 32rpx;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar_home image:last-child {
    width: 37rpx;
    height: 35rpx;
    padding: 0 32rpx;
}

四、父组件-wxml 

<view>
    <yx-navbar header="{{header}}"></yx-navbar>
    <image class="" style="width:100%" src="../../assets/images/pikaqiu.png" lazy-load="false" binderror=""
        bindload=""></image>
    <view>内容区域</view>
</view>

五、父组件-js ，记得json文件里先引入组件，这样就完成啦

Page({
  data: {
    header: {
      homeCapsule: true,
      title: '标题',
      fontSize: '36rpx',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad() {
  }
})

原文链接：微信小程序自定义导航栏组件 - 掘金