有一段时间没有更新小程序相关的文章了，今天梳理代码偶遇前段时间写的小程序自定义导航栏组件，便兴起梳理成此文供大家参考
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:若对您有帮助，动动小手指点个赞吧🙂
相关推荐
微信小程序内生成二维码
微信小程序分享小程序码的生成（带参数）以及参数的获取
微信小程序生成分享海报（附带二维码生成）
微信小程序中的版本管理
生活娱乐
！惊，跑步竟然能跑出钱来（你的额外收入）
大家注意啦，产品经理打人啦！(一)
完
网友评论