有一段時間沒有更新小程序相關的文章了，今天梳理代碼偶遇前段時間寫的小程序自定義導航欄組件，便興起梳理成此文供大家參考

1.設計小程序自定義導航的基本思路

完成自定義導航欄我一般思路分為三步

確定自定義導航欄高度>確定右側膠囊體的的寬高>具體細節(jié)實現(xiàn)

下面就讓我們按照思路來實現(xiàn)一個簡單的自定義導航欄吧

2.確定不同機型下導航欄的高度

那么我們需要知道自定義導航欄最終的高度是由哪些部分組層
經(jīng)過各種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.確定膠囊體的大小

經(jīng)過查找我們可以通過微信自有aip來確定膠囊體的大小
wx.getMenuButtonBoundingClientRect()接口返回值包含膠囊體的高度和寬度
我們可以通過

ps：有些機型有些時候此方法無效，可以多獲取幾次???♂?，此處可留意下方代碼的getMenuSettings()方法和使用邏輯

4.具體細節(jié)實現(xiàn)請看代碼如下，拱手相送??

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: ''}
},
/**
 * 組件的初始數(shù)據(jù)
 */
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:若對您有幫助，動動小手指點個贊吧??

相關推薦

微信小程序內生成二維碼

微信小程序分享小程序碼的生成（帶參數(shù)）以及參數(shù)的獲取

微信小程序生成分享海報（附帶二維碼生成）

微信小程序中的版本管理

生活娛樂

！驚，跑步竟然能跑出錢來（你的額外收入）

大家注意啦，產(chǎn)品經(jīng)理打人啦！(一)

完