简单实现小程序自定义导航栏（基于mpvue）

有一段时间没有更新小程序相关的文章了，今天梳理代码偶遇前段时间写的小程序自定义导航栏组件，便兴起梳理成此文供大家参考

1.设计小程序自定义导航的基本思路

完成自定义导航栏我一般思路分为三步

确定自定义导航栏高度>确定右侧胶囊体的的宽高>具体细节实现

下面就让我们按照思路来实现一个简单的自定义导航栏吧

2.确定不同机型下导航栏的高度

那么我们需要知道自定义导航栏最终的高度是由哪些部分组层
经过各种baidu，Google基本确定自定义导航栏需要确定手机顶部小程序无法去除的statusBar的高度和小程序导航高度

自定义导航高度组成

在不同的手机测试和搜查后基本确定statusBar高度，小程序自有导航高度，如下写在systemSetting.js中

const statusBar = {
  android: 24,
  iPhone: 20,
  newModel: 44 // 长屏下默认高度
}
const navigationBar = {
  default: 44
}
const navBarStyle = {
  background: 'rgba(255,255,255,0)',
  color: '#000',
  textAlignAndroid: 'left',
  textAlignIPhone: 'center',
  textAlign: 'center',
  fontSize: 18
}
export { statusBar, navigationBar, navBarStyle }

接下来就是确定自有小程序右侧胶囊体的大小了

3.确定胶囊体的大小

经过查找我们可以通过微信自有aip来确定胶囊体的大小
wx.getMenuButtonBoundingClientRect()接口返回值包含胶囊体的高度和宽度
我们可以通过

ps：有些机型有些时候此方法无效，可以多获取几次🤦‍♂️，此处可留意下方代码的getMenuSettings()方法和使用逻辑

4.具体细节实现请看代码如下，拱手相送🙂

navigationBar.vue文件

<template>
<view class="navigation-bar" :style="{paddingTop: paddingTop + 'px', height: height + 'px', backgroundColor: background||barStyle.background}">
<view v-if="leftShow" class="back-home" :style="{minWidth:menuSettings.width + 'px',height: menuSettings.height + 'px',borderRadius: (menuSettings.height/2) + 'px',marginTop:marginTop + 'px', transform:'scale('+scale+')'}">
  <div class="back" @click="goBack" :style="{height: menuSettings.height + 'px'}"><img src="/static/img/2.4_back_icon.png" alt=""></div>
  <div class="line"></div>
  <div class="home" @click="goHome" :style="{height: menuSettings.height + 'px'}"><img src="/static/img/2.4_home_icon.png" alt=""></div>
</view>
<view v-else class="back-home2" :style="{minWidth:menuSettings.width + 'px',height: menuSettings.height + 'px'}"></view>
<view class="title" :style="{textAlign: barStyle.textAlign, color: color||barStyle.color,fontSize: barStyle.fontSize + 'px',lineHeight: barStyle.fontSize + 'px', lineHeight:barStyle.height + 'px'}">{{title}}</view>
<view class="back-home1" :style="{minWidth:menuSettings.width + 'px',height: menuSettings.height + 'px'}"></view>
  </view>
</template>

<script>
  import {statusBar, navigationBar, navBarStyle} from '@/utils/systemSetting'
  import store from '@/store'
  export default {
props: {
  title: {type: String, default: ''},
  color: {type: String, default: ''},
  background: {type: String, default: ''}
},
/**
 * 组件的初始数据
 */
data () {
  return {
    paddingTop: statusBar.android, // 默认为android大部分普通机型高度
    height: navigationBar.default + statusBar.android,
    barStyle: {},
    currentPage: '',
    leftShow: false,
    marginTop: 0,
    scale: 1
  }
},
computed: {
  showBackIcon () {
    const pages = global.getCurrentPages()
    this.currentPage = pages[pages.length - 1].route
    if (pages.length > 1) {
      this.leftShow = true
      return true
    } else {
      if (this.currentPage !== 'pages/index/main') {
        this.leftShow = true
      }
      return false
    }
  },
  menuSettings () {
    return store.state.menuSettings
  }
},
mounted () {
  const systemInfo = wx.getSystemInfoSync()
  if (this.menuSettings.height === 0) {
    this.getMenuSettings(1, 3)
  }
  this.scale = 1 - (0.5 / this.menuSettings.height)
  this.marginTop = this.menuSettings.top - systemInfo.statusBarHeight
  const ratio = systemInfo.screenHeight / systemInfo.screenWidth // 高宽比例
  const isNewModel = ratio >= 2
  const isIPhone = systemInfo.model.indexOf('iPhone') >= 0
  const barHeight = systemInfo.statusBarHeight || (isNewModel ? statusBar.newModel : isIPhone ? statusBar.iPhone : statusBar.android)
  this.paddingTop = barHeight
  this.height = barHeight + navigationBar.default
  let barStyle = {...navBarStyle}
  barStyle.height = navigationBar.default
  this.barStyle = barStyle
},
/**
 * 组件的方法列表
 */
methods: {
  getMenuSettings (current, count) {
    let menuSettings = wx.getMenuButtonBoundingClientRect()
    if (menuSettings.height === 0) {
      if (current > 3) {
        return
      }
      setTimeout(() => {
        this.getMenuSettings(current + 1, count)
      }, 200)
    } else {
      store.commit('setMenuSettings', menuSettings)
    }
  },
  goBack () {
    if (this.showBackIcon) {
      wx.navigateBack({
        delta: 1
      })
    } else {
      if (this.currentPage !== 'pages/index/main') {
        wx.reLaunch({
          url: '/pages/index/main'
        })
      }
    }
  },
  goHome () {
    if (this.currentPage !== 'pages/index/main') {
      wx.reLaunch({
        url: '/pages/index/main'
      })
    }
  }
}
  }
</script>

<style scoped>
.navigation-bar{
  width: 100vw;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  color: #000;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 1000;
}
.back-home{
  display: flex;
  align-items: center;
  background: rgba(255,255,255, 0.6);
  border-radius: 16px;
  margin-left: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 1px rgb(207, 207, 207);
  overflow: hidden;
}
.back-home2{
  margin-left: 10px;
}
.back-home1{
  margin-right: 10px;
}
.back, .home{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back img{
  width: 9px;
  height: 16px;
}
.home img{
  width: 17px;
  height: 17px;
}
.line{
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0,0.2);
  transform: scaleX(0.5);
}
.title{
  flex: 1;
  box-sizing: border-box;
  padding: 0 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* font-weight: bold; */
}
</style>

一下是store.js中的代码供参考

state: {
  menuSettings: {height: 0}
}
mutations: {
  setMenuSettings (state, settings) {
    state.menuSettings = settings
  }
}

使用

<navigation-bar title="" background="" color=""></navigation-bar>
import navigationBar from '@/components/navigationBar'
components: {navigationBar}

效果如下：

iPhone X
iPhone 6
谋安卓机型

大同小异

ps:若对您有帮助，动动小手指点个赞吧🙂

相关推荐

微信小程序内生成二维码

微信小程序分享小程序码的生成（带参数）以及参数的获取

微信小程序生成分享海报（附带二维码生成）

微信小程序中的版本管理

生活娱乐

！惊，跑步竟然能跑出钱来（你的额外收入）

大家注意啦，产品经理打人啦！(一)

---

完