微信小程序自定义头部标题导航栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序自定义头部标题导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

/**
 * 头部自定义导航栏
 * 
 * 参数：
 * show: 显示导航标题栏，默认显示
 * title: 导航栏标题
 * bgColor: 导航栏背景颜色，默认透明'transparent'
 * noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消
 * opacity: 导航栏透明度，默认1不透明
 * showNavBtn: 是否显示左侧导航按钮，默认true显示
 * navIcon: 用户自定义导航按钮图标路径
 * navHome: 导航按钮为主页home，与返回back互斥，默认false显示返回back
 * 
 * 外部样式类：(使用时注意权重，添加外部样式类无效果的时候，给类加点权重就可以了)
 * custom-icon-class: 标题左侧图标外部样式类
 * custom-title-class: 标题外部样式类
 * custom-root-class: 根节点外部样式类
 * 
 * 事件：
 * onBack: 用户点击左上角返回按钮后回调
 * onHome: 用户点击左上角Home按钮后回调
 * onIcon: 用户点击自定义icon后回调
 * 
 * 使用：在页面的json文件中
 * "usingComponents": {
 *    "header-nav-bar": "/components/HeadNavBar/HeadNavBar"
 * },
 */

wxml：

<view class="navbar custom-root-class" style="height:{{navHeight}}px; background:{{bgColor}}; position: {{noSticky ? 'fixed':'sticky'}}; opacity: {{opacity}};" wx:if="{{show}}">
  <view class="navbar-container" style="padding-top:{{navTop}}px;">
    <!-- 导航按钮 -->
    <view wx:if="{{showNavBtn}}">
      <!-- 默认显示返回，若添加isShowHome属性则显示主页，添加isShowCustomIcon则显示用户自定义icon -->
      <view class="navbar-btn" wx:if="{{navIcon}}" bindtap="navBtn">
        <image class="navbar-icon custom-icon-class" src="{{navIcon}}"></image>
      </view>
      <view class="navbar-btn" wx:elif="{{navHome}}" bindtap="navHome">
        <image class="navbar-icon custom-icon-class" src="./images/home.svg"></image>
      </view>
      <view class="navbar-btn" wx:else bindtap="navBack">
        <image class="navbar-icon custom-icon-class" src="./images/back.svg"></image>
      </view>
    </view>
    <!-- 中间标题 -->
    <view class="navbar_title custom-title-class">
      <text>{{title}}</text>
      <!-- 具名插槽 -->
      <view style="display: inline-block;">
        <slot name="titleSlot"></slot>
      </view>
    </view>
  </view>
</view>

js：

const app = getApp()
Component({
  // 外部样式类
  externalClasses: ['custom-icon-class', 'custom-title-class', 'custom-root-class'],
  // 组件的属性列表
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    title: {
      type: String,
      value: '标题'
    },
    bgColor: {
      type: String,
      value: 'transparent'
    },
    noSticky: {
      type: Boolean,
      value: false
    },
    opacity: {
      type: Number,
      value: 1
    },
    showNavBtn: {
      type: Boolean,
      value: true
    },
    navIcon: {
      type: String,
      value: ''
    },
    navHome: {
      type: Boolean,
      value: false
    },
  },
  options: {
    // 在组件定义时的选项中启用多 slot 支持
    multipleSlots: true // 复数插槽: 是
  },
  // 组件的初始数据
  data: {
    // 导航栏数据
    navHeight: 0,
    remainHeight: 0,
    navTop: 0
  },
  // 生命周期函数推荐写法
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    // 在组件实例进入页面节点树时执行
    attached: function () {
      // 设置导航栏，获取菜单按钮的布局位置信息
      let menuButtonObject = wx.getMenuButtonBoundingClientRect()
      // 获取系统信息
      wx.getSystemInfo({
        success: (res) => {
          // console.log(res);
          // 状态栏的高度
          let statusBarHeight = res.statusBarHeight
          // 胶囊按钮与顶部的距离
          let navTop = menuButtonObject.top
          // 导航栏高度
          let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
          // 除导航栏剩余高度
          let remainHeight = res.windowHeight - navHeight
          // 设置录入数据属性
          this.setData({
            navHeight: navHeight, // 导航栏高度
            remainHeight: remainHeight, // 除导航栏剩余高度
            navTop: navTop // 胶囊按钮与顶部的距离
          })
          // 子传父，将导航栏高度传过去
          /* this.triggerEvent('getNavHeight', {
              navHeight: this.data.navHeight
          }) */
          // 将导航栏高度设置进全局数据
          app.globalData.navHeight = navHeight
          // 将除导航栏剩余高度设置进全局数据
          app.globalData.remainHeight = remainHeight
        },
        fail(err) {
          console.log(err)
        }
      })
    },
    // 在组件实例被从页面节点树移除时执行
    detached: function () {}
  },
  // 组件的方法列表
  methods: {
    // 回退
    navBack() {
      wx.navigateBack()
      this.triggerEvent('onBack')
    },
    // 回主页
    navHome() {
      wx.switchTab({
        url: '/src/pages/home/home'
      })
      this.triggerEvent('onHome')
    },
    navIcon() {
      this.triggerEvent('onIcon')
    }
  },
})

wxss：

.navbar {
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  box-sizing: border-box;
}

.navbar-container {
  position: relative;
  width: 100vw;
  height: 64rpx;
  z-index: 100;
  display: flex;
  box-sizing: border-box;
}

.navbar-btn {
  width: 64rpx;
  height: 64rpx;
  z-index: 100;
  position: absolute;
  left: 24rpx;
  display: flex;
  align-items: center;
}

.navbar-icon {
  width: 36rpx;
  height: 36rpx;
}

.navbar_title {
  width: 100%;
  height: 64rpx;
  line-height: 64rpx;
  color: #000;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

样例：

微信小程序自定义头部标题导航栏