微信小程序自定义头部导航栏（组件化）

2023-08-08 19:08:06 186

本文实例为大家分享了微信小程序自定义头部导航栏的具体代码，供大家参考，具体内容如下

效果图

支持导航栏自定义背景颜色、背景图片支持返回文字自定义支持导航标题自定义

首先在app.jsonwindow配置项添加

"window":{
"navigationStyle":"custom"
}

自定义头部导航栏代码

wxml部分

wxss部分

.cu-custom{display:block;position:relative;}
.cu-custom.cu-bar{display:flex;align-items:center;justify-content:space-between;position:fixed;width:100%;top:0;min-height:100rpx;padding-right:220rpx;box-shadow:0rpx0rpx0rpx;z-index:9999;background-color:#fff;}
.cu-custom.cu-bar.border-custom{position:relative;background:rgba(255,255,255,0.5);border-radius:1000rpx;height:30px;}
.cu-custom.cu-bar.action{display:flex;align-items:center;height:100%;justify-content:center;max-width:100%;}
.cu-custom.cu-bar.action:first-child{margin-left:30rpx;font-size:30rpx;}
.cu-custom.cu-bar.border-customtext{display:block;flex:1;margin:auto!important;text-align:center;font-size:34rpx;}
.cu-bar.content{width:calc(100%-440rpx);position:absolute;text-align:center;left:0;right:0;bottom:0;top:0;margin:auto;height:60rpx;font-size:32rpx;line-height:60rpx;cursor:none;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

js部分

constApp=getApp();
Component({
options:{
addGlobalClass:true,
multipleSlots:true
},
properties:{
isBack:{
type:[Boolean,String],
default:false
},
bgColor:{//类名
type:String,
default:''
},
bgImage:{//仅支持网络地址
type:String,
default:''
},
},
data:{
StatusBar:App.GlobalData.StatusBar,
CustomBar:App.GlobalData.CustomBar,
Custom:App.GlobalData.Custom,
isShare:App.GlobalData.share
},
methods:{
BackPage(){
wx.navigateBack({
delta:1
});
},
toHome(){
wx.reLaunch({
url:'/pages/index/index',
})
}
}
})

app.js判断是否分享

App({
GlobalData:{
share:false,
StatusBar:0,
Custom:0,
CustomBar:0
},
onLaunch:function(){
letself=this
letsystemInfo=wx.getSystemInfoSync()
self.GlobalData.StatusBar=systemInfo.statusBarHeight;
if(wx.getMenuButtonBoundingClientRect){
letcustom=wx.getMenuButtonBoundingClientRect();
self.GlobalData.Custom=custom;
self.GlobalData.CustomBar=custom.bottom+custom.top-systemInfo.statusBarHeight;
}
})

因为组件css里不支持伪类元素所以写在app.css

/*自定义头部导航栏图标*/
.cu-custom[class*="icon-"]{font-family:"iconfont"!important;font-size:inherit;font-style:normal;}

@font-face{font-family:"iconfont";
src:url('iconfont.eot?t=1555316650045');/*IE9*/
src:url('iconfont.eot?t=1555316650045#iefix')format('embedded-opentype'),/*IE6-IE8*/
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANcAAsAAAAAB0wAAAMPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCLIIKATYCJAMMCwgABCAFhG0HPxtZBsiemjyKBSigJhHwFACGePCEutd3On3HX0oBgBzCrQwwpxvBCDR2tgVzWmSLL1RJEo0V68AF6Bsg4wdCz0+7oQxuhxBSCRhLPW1+Ay6n/1+JzwPKbaxNY9OcFGCCAY21KZAHLpAEvWHsApdwHAI4amtJBg5+es1UsFjjBJDsDFXIVHImbEu6ECIENUtthuwgQWg2mhJge/h9+UP7QjAkFGvq2LvImf37vq6IVzDTJxDP5wDYKlCgJbAgs2tdU+XjaEuK0xQFPR8CLIKZKxDHhCJdEdh/eGAQkAArNRWApihm4DtXlKqHkrtOVQCCOGmmDDksXcWxtJFWjZOLo+97m+5UXPh55OpD782Kq9UuPmzkdeV+7zfvxfjzj1scPi7qNz+ucfhU3wPOmRUvOjpd+cy5TU+qGnfuXXVF21Tfd7hK2s/5zWcrLfo6uLj0lMky3G7tAf3+Nh96cqTdkZKAvt/mtErvN3SVSr9JXhz7eKT/52f5r37kwxXngld/KlVqW7XKmv39DxVVnratPbW3o0HNScOZw0H1BrtuNR/Q7DBquG5Ukw5bDkb76+2PNh8q15yu+yL1wrlpU887+4VpH7/nSzFXBoi/7WDNJAO6xrz4+7/BNMr8n9Pu+T/0FoAPzb0UyvrHQgww8b+umB4AdjCXWhG1QIvG9vWjTBg5yQAOB8TQV9638ZpKeioIIZVSGFKoBSWkIWlZLZHA0xEBIX3gaGHIak8FhfKITQLNrQUQyroOQ2meQynrNWlZX5Ggsn8IKJvCMbkKW3oal+EGFEIIINP8lDIkdhTHGtSi9GeooSV4WWnIfofn6wFq17ptMXELB94cM4oidVEcKBR5bNNgcBosiynfYwNSMEkPguuyTZuo7k2TBWxnagzgAUEAZGS+FMkgYQ7Fbx+olT7/DFQhi8BrqasJvgOPT++ctNNa2x7krcrpVXcvrxSJqBaKBRQk4mE2Mhg4wLKjjOTXDzKAJDCRPiJ8tdQGtYr6qibra+wPKGRNWHeqGFGx+KJ0DlPY7MEpR/McLdTnAAA=')format('woff2'),
url('iconfont.woff?t=1555316650045')format('woff'),
url('iconfont.ttf?t=1555316650045')format('truetype'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/
url('iconfont.svg?t=1555316650045#iconfont')format('svg');/*iOS4.1-*/
}

.iconfont{font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon-homefill:before{content:"\e6fc";}
.icon-back:before{content:"\e67a";}
.cu-custom.cu-bar.border-custom::after{content:"";width:200%;height:200%;position:absolute;top:0;left:0;border-radius:inherit;transform:scale(0.5);transform-origin:00;pointer-events:none;box-sizing:border-box;border:1rpxsolidrgba(0,0,0,0.3);opacity:0.5;}
.cu-custom.cu-bar.border-custom::before{content:"";width:1rpx;height:110%;position:absolute;top:22.5%;left:0;right:0;margin:auto;transform:scale(0.5);transform-origin:00;pointer-events:none;box-sizing:border-box;opacity:0.6;background-color:rgba(0,0,0,0.3);}

开发工具显示不正常主要以真机显示为主具体可根据自己的需求修改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序自定义头部导航栏（组件化）

热门推荐

随机推荐