微信小程序自定义导航栏（模板化）

2023-08-08 19:11:04 62

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件，但是对于分享页有一定的bug
这次用模板化又搞了一遍优化了下Android与IOS显示更接近微信原生的导航栏，以及修复分享页面不显示返回首页按钮
如果大家不习惯模板化的话可以针对自己的需求拿以前封装的组件化做一些修改
微信小程序自定义导航栏(组件化)

CustomNavBar.wxml














0}}">
{{navTitle}}



















0}}">
{{navTitle}}

CustomNavBar.wxss

.custom-navbar-con{position:relative;width:100%;background-color:white;z-index:9999;}
.custom-navbar-con.custom-navbar-statusbar-con{width:100%;}
.custom-navbar-con.custom-navbar-content{width:100%;}
.custom-navbar-con.custom-navbar-left-menu-con{position:absolute;}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn{height:100%;border-radius:200px;border:1pxsolidrgba(220,220,220,0.6);}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn.icon{height:90%;margin-top:2.5%;}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn.text{font-size:27rpx;}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn.back{border:none;}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn.back~.custom-navbar-icon-btn.home{margin-left:10rpx;}
.custom-navbar-con.custom-navbar-left-menu-con.custom-navbar-icon-btn.switch-shop{padding-left:5px;padding-right:25rpx;}


.custom-navbar-con.ios.custom-navbar-title.android{display:none;}
.custom-navbar-con.android.custom-navbar-title.ios{display:none;}
.custom-navbar-con.custom-navbar-title.ios{font-weight:bold;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.custom-navbar-con.custom-navbar-title.android{padding-left:30rpx;}```

CustomNavBar.js

```javascript
module.exports=function(PageInstance){
letApp=getApp()

let_tplData={
_CustomNavBar_:{
navRightMenuRect:App.NavRightMenuRect,
navRightMenuCenterY:App.NavRightMenuCenterY,
statusBarHeight:App.StatusBarHeight,
winWidth:App.WinWidth,
winHeight:App.WinHeight,
iOS:App.iOS,

navTitle:'',//当前只合适短标题，如需长标题，建议隐藏自定义导航栏，自定义展示
navHeight:App.CustomNavHeight,

needFixed:false,

showNavBar:!App.NavRightMenuRect?false:true,
showLeftMenu:true,
showBackBtn:true,
showHomeBtn:false
}
}

let_tplMethods={
customNavBarBack(){
wx.navigateBack()
},
customNavBarBackToHome(){
leturl='/pages/index/index'
wx.reLaunch({
url:url
})
}
}
letisIndexPage=!!(PageInstance.route=='pages/index/index')
letpages=getCurrentPages()
if(pages.length==1){
_tplData._CustomNavBar_.showBackBtn=false
_tplData._CustomNavBar_.showHomeBtn=!isIndexPage
}

//每个页面可单独配置自定义导航栏
if(PageInstance.data.CustomNavBarConfig){
Object.assign(_tplData._CustomNavBar_,PageInstance.data.CustomNavBarConfig)
}

//!!!!最后执行
//当无法获取到右上角按钮胶囊的布局位置时，强制设置自定义导航栏为隐藏状态
if(!App.NavRightMenuRect){
_tplData._CustomNavBar_.showNavBar=false
}

Object.assign(PageInstance,_tplMethods)
PageInstance.setData(_tplData)
returnthis
}

app.js的配置

//自定义导航栏
importCustomNavBarfrom'./template/CustomNavBar/CustomNavBar';

App({
//自定义模板式组件
CustomNavBar,

//系统信息
WinWidth:0,
WinHeight:0,
StatusBarHeight:0,
PixelRatio:1,
SystemFullName:'',
SystemVersion:'',
SystemSDKVersion:'',

//自定义导航栏相关
NavRightMenuRect:null,
NavRightMenuCenterY:0,
CustomNavHeight:0,

onLaunch:function(options){
letself=this
letsystemInfo=wx.getSystemInfoSync()
self.iOS=systemInfo.platform==='ios'
self.isDebug=systemInfo.platform==='devtools'
if(self.isDebug){
//单纯为了在开发工具下调试自定义导航栏
//开发工具下不存在App版本号的区分
systemInfo.version='7.0.0'
}
self.WinWidth=systemInfo.windowWidth
self.WinHeight=systemInfo.windowHeight
self.StatusBarHeight=systemInfo.statusBarHeight
//部分小程序库版本没有返回状态栏高度
if(!self.StatusBarHeight){
self.StatusBarHeight=20
}
self.PixelRatio=Math.max(systemInfo.pixelRatio,2)
self.SystemFullName=systemInfo.system
self.SystemVersion=systemInfo.version
self.SystemSDKVersion=systemInfo.SDKVersion

//app.json全局配置的自定义导航栏的话，客户端需求版本为6.6.0
//每个页面单独配置的自定义导航栏的话，客户端需求版本为7.0.0
//wx.getMenuButtonBoundingClientRect方法，要求基础库版本为2.1.0
if(self.compareVersion(self.SystemVersion,'6.6.0')>=0){
//官方的6.6.0版本以上客户端，最低基础库版本为1.9.4
//6.6.0以上且[1.9.4-2.1.0]范围内的机型无法使用wx.getMenuButtonBoundingClientRect
//所以手动写死非全面屏手机的适配胶囊布局位置
self.NavRightMenuRect={
top:26,
bottom:58,
right:self.WinWidth-10,
width:87,
height:32
}
//如果系统信息返回的状态栏高度大于20，认为是全面屏手机
if(self.StatusBarHeight>20){
self.NavRightMenuRect.top=50
self.NavRightMenuRect.bottom=82
}

//2019年08月21日22:09:22
//微信小程序库出现bug，导致部分机型wx.getMenuButtonBoundingClientRect无返回值
//所以在这之前先默认写死一个NavRightMenuRect，防止全局的自定义导航栏已经隐藏了但是无法显示自定义导航栏
//详见https://developers.weixin.qq.com/community/develop/doc/00062238d78e880aedd88b72351c00
if(wx.getMenuButtonBoundingClientRect){
letNavRightMenuRect=wx.getMenuButtonBoundingClientRect()
self.NavRightMenuRect={
top:NavRightMenuRect.top,
bottom:NavRightMenuRect.bottom,
right:NavRightMenuRect.right,
width:NavRightMenuRect.width,
height:NavRightMenuRect.height
}
}

self.NavRightMenuCenterY=self.NavRightMenuRect.top+self.NavRightMenuRect.height/2
self.CustomNavHeight=self.NavRightMenuRect.bottom+(self.NavRightMenuRect.top-self.StatusBarHeight)
}else{
self.NavRightMenuRect=null
self.CustomNavHeight=0
}
},

//比较两个版本号
compareVersion(v1,v2)=>{
v1=v1.split('.')
v2=v2.split('.')
constlen=Math.max(v1.length,v2.length)

while(v1.lengthnum2){
return1
}elseif(num1
假如在index页面引用
index.wxml



index.js
onLoad:function(options){
newApp.CustomNavBar(this)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序自定义导航栏（模板化）

热门推荐

随机推荐