微信小程序自定义导航栏

允许自定义

• 在json文件中设置

    "navigationStyle": "custom"

封装navbar组件

• 通过 getMenuButtonBoundingClientRect 获取导航栏高度
• 写样式
  • html

<view class="navbar" style="height: {{height.top+height.height+bottom}}px;">
  <view class="box" style="background: {{bgImage?'transparent':bg?bgColor:'transparent'}};">
    <image src="{{baImage}}" mode="aspectFill" wx:if="{{bgImage}}" />
  </view>
  <view class="content">
    <view style="height: {{height.top}}px;"></view>
    <view class="con" style="height: {{height.height}}px;">
      <view class="iconfont icon-icon-arrow-left2" wx:if="{{icon}}" style="font-size: {{icon_size}}rpx;color: {{icon_color}};" bind:tap="onBack"></view>
      <view class="title" style="font-size: {{title_size}}rpx;font-weight: {{title_bold?'bold':'normal'}};color: {{title_color}};">{{title}}</view>
    </view>
    <view style="height: {{bottom}}px;"></view>
  </view>
</view>

@import "/assets/iconfont.wxss";

.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 999;
    overflow: hidden;
}

.navbar .box {
    width: inherit;
    height: inherit;
    position: absolute;
    z-index: 99;
}

.navbar .bgImage image {
    width: inherit;
    height: inherit;
}

.navbar .content {
    position: absolute;
    width: inherit;
    height: inherit;
    z-index: 9999;
}

.navbar .con {
    position: relative;
    padding: 0 30rpx;
}

.navbar .con view {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.navbar .con .title {
    left: 50%;
    transform: translate(-50%, -50%);
}

• 控制传递参数

  参数	含义
  bg	是否显示背景
  bgColor	背景颜色（默认为白色）
  bgImage	背景图片
  icon	是否显示左边按钮
  icon_size	按钮大小
  icon_color	按钮颜色
  title	标题
  title_bold	标题是否加粗（默认加粗）
  title_color	标题颜色
  bottom	胶囊距底高度
  back	是否自己控制返回按钮（默认范围上一页，没有则返回首页）

const app = getApp()
const navbarHeightInfo = app.globalData.navbarHeightInfo
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    bg: {
      type: Boolean,
      value: true
    },
    bgColor: {
      type: String,
      value: "#fff"
    },
    bgImage: {
      type: String,
      value: ""
    },
    icon: {
      type: Boolean,
      value: true
    },
    icon_size: {
      type: String || Number,
      value: 30
    },
    icon_color: {
      type: String,
      value: '#000'
    },
    title: {
      type: String,
      value: '乐家'
    },
    title_bold: {
      type: Boolean,
      value: true
    },
    title_size: {
      type: String || Number,
      value: 30
    },
    title_color: {
      type: String,
      value: '#000'
    },
    bottom: {
      type: String || Number,
      value: 8
    },
    back: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    height: navbarHeightInfo
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onBack() {
      if (this.data.back) {
        this.triggerEvent("onBack")
        return
      }
      wx.navigateBack({
        delta: 1,
        success(res) {
        },
        fail(err) {
          wx.switchTab({
            url: '/pages/indexpage/indexpage',
          })
        }
      })
    }
  }
})

使用

1. 在json文件中引入

{
 "usingComponents": {
    "Navbar":"/components/navbar/navbar",
  },
}

2.在页面中用

<Navbar title="登记" bg="{{false}}" />