微信小程序自定义头像导航栏和导航栏背景图片导航样式问题

这两天哭是因为想做一个有背景的小节目负责人。即使小程序的导航栏有背景，我也要让导航栏上的背景顺利进行，心态崩溃。现在可以单独设置一个页面的小程序标题，但前提是需要微信7.0以上的版本。考虑到兼容性问题，不要操之过急，所以把所有页面的小程序头都换成老版本。

我参考了其他文章，但是并没有解决自定义背景和后退按钮颜色的问题，而且因为IOS的橡皮筋效应，对IOS不友好，屏幕会被划伤。所以这些功能都有针对性的进行了改动，因为我只学了两三天小程序，所以踩了很多坑，不过好在最后的效果达到了。

以下是效果图：

其实原理是禁用原页眉，然后自动顶到PAGE，定义一个页眉组件，设置为固定布局并固定在原页眉部分，然后在页面中添加Margin-top，这样就恢复了原来的感觉。后面再讲背景。

1 .应用程序配置

首先，禁用所有的标题导航，在app.json的窗口中添加一行这个，你会发现所有的标题都消失了。然后禁止滑动页面，通过滚动查看解决滑动问题

window ' : { ' navigation style ' : ' custom ' }，' disablescroll ' : true，然后在app.js中获取导航头高度的全局数据

//app . jsapp({ globalData: { status barheight : wx . getsysteminfosync()[' status barheight ']}，//判断共享是否进入小程序if(e . scene==1007 | | e . scene==1008){ this . globaldata . share=true } else { this . globaldata . share=false }//获取设备顶部的窗口高度(不同设备的窗口高度不同，根据设置自定义导航栏的高度//我最初是从组件中得到这个的，但是出现了一个问题。刚进入小程序的时候，导航栏覆盖了部分//页面内容，开始调试重新进入的时候没有问题，这让我很疑惑。//虽然最后解决了，但是花了很多时间，wx . getsystem info({ success : RES={ this。global data . height=RES . status barheight } })，global data 3360 { user info : null，Share: false，//sharing默认为false height: 0 //top height}})在app.wxss中为页面添加100%的高度

/* app . wxss */page { height : 100%；}应用程序配置应该在这里完成。

2.组件配置

组件结构：

播放源代码

//导航条。wxmlview class=' nav-wrap ' style=' height : { { height * 2 20 } } px；'！-导航栏背景图片-image class=' background img ' src=' http : { { NavBardata }。address } } ' bind load=' IMgloaded ' style=' width : { { imageWidth } } px；height:{{imageHeight}}px' /！- //导航栏中间的标题-view class=' nav-title ' wx : if=' { {！巴尔达导航。white } } ' style=' line-height : { { height * 2 44 } } px；'{ { NavBardata }。title } }/view view class=' nav-title ' wx : else=' { {！巴尔达导航。white } } ' style=' line-height : { { height * 2 44 } } px；color : # ffffff"{ NavBarData。title } }/view view style=' display : flex；证明内容：空间环绕；弯曲方向：柱！- //导航栏左上角的返回按钮- !- //其中wx : if=' { { NavBardata }。显示胶囊} }”是控制左上角按钮的显示隐藏，首页不显示-view class=' nav-capsule ' style=' height : { { height * 2 44 } } px；wx : if=' { { NavBardata }。显示胶囊} } '！- //左上角的返回按钮，wx:if='{{！共享}} '空制返回按钮显示- !- //从分享进入小程序时返回上一级按钮不应该存在- !- navbarData.white是控制按钮颜色的，因为背景有深浅色，返回按钮自己找图片-查看绑定tap=' _ nav back ' wx : if=' { {！sharenavbardata。白色} }”图像src=”././images/返回(1).SVG ' mode=' aspectFit ' class=' back-pre '/image/view视图bind tap=' _ nav back ' wx : else=' {！share } }"image src="././images/返回“SVG”模式=“AspectFit”类=“back-pre”/image/view/view/view/view！-导航栏下面的背景图片-image class=' background img ' src=' http : { { NavBardata }。address } } ' bind load=' IMgloaded ' style=' width : { { imageWidth } } px；高度： { { imageHeight } } px '/CSS:

/* navbar.wxss *//*顶部要固定定位标题要居中自定义按钮和标题要和右边微信原生的胶囊上下对齐*/.nav-wrap {/*显示：无；*/position:固定；宽度： 100%;top : 0；背景# fffcolor : # 000z-index : 9999999；背景技术： # 000;飞越：隐藏；}/* 背景图*/.背景img {位置：绝对；z指数：-1;}/* 标题要居中*/.导航标题{位置：绝对值；文本对齐：中心；最大宽度： 400 rpx飞越：隐藏；文本-飞越：省略号；空白： nowraptop : 0；左： 0；右： 0；底部： 0；margin : auto font-size : 36rpx；颜色： # 2c 2 B2B字体粗细： 450；}.nav-capsule { display : flex；align-items:居中；左边距左： 30rpx宽度： 140 rpx正义-内容：空格；高度： 100%;}.后预{宽度： 32 rpxheight : 36 rpxmargin-top : 4rpx；padding: 10rpx }。导航舱{ width : 36 rpxhware : 40 rpxmargin-top : 3rpx；}在数据里声明我是个组件

{"组件":为真，"使用组件": {}}最后是js。

const app=GetApp()Component({ properties : { NavBardata : }//NavBardata由父页面传递的数据，变量名字自命名type: Object，value: {}，observer: function(newVal，oldVal) {}，data: { height: ' '，//默认值默认显示左上角nav bardata : { show capsule : 1 }，imagewidth : wx。getsysteminfosync().windowWidth，//背景图片的高度imageHeight: '' //背景图片的长度，通过计算获取}，attached: function() { //获取是否是通过分享进入的小程序这个。setdata({ share : app。全球数据。share })//定义导航栏的高度方便对齐这个。setdata({ height : app。全球数据。height })}，methods: { //返回上一页面_navback() { wx.navigateBack() }，//计算图片高度这个。setdata({ image height : e . detail。高度*(wx)。getsysteminfosync().窗宽/e .详图。宽度)})}//返回到首页//_ back home(){//wx。切换选项卡({//URL : '/page/index/})//} } })大概就是这么多，怎么在页面上用呢

3.具体页面配置

页面的HTML，我是内容里面放页面的东西。

nav-bar nav bar-data=' { { nvabarData } } '/nav-bar scroll-view scroll-y style=' height : 100%；'view class=' scroll-view-item ' style=' padding-top : { { height } } px；'我是内容/查看/滚动查看页面的JSON，navigationBarTextStyle用来配置胶囊的颜色。因为胶囊是微信给的，不能定制，只能换，所以在这里换。

{ '使用组件' : { '导航条' : '././components/navbar/navbar'}，'导航栏文本样式' :' white'}页面JS，只需填写图片的地址即可。关注getApp()。

const app=getapp()page({ data : {//parameter nvabardata 3360 { show capsule 3360 1，//是否在左上角显示图标1表示显示0表示不显示title:' title '，//标题栏中间的title white3360 true，//是白色，不只是显示。地址： '././images/mask group[email protected]'//没有背景就没有}，//导航头高度： app . global data . height * 2 20 } })4。存在的问题

上拉刷新

我还没试过，但是原生微信上拉刷新肯定不行。如果学生喜欢IOS橡皮筋模式或者想刷新，可以从特定页面中删除滚动视图组件，替换为view(记得保留那个填充-top！)，然后删除app.json的禁用幻灯片我没有细说，我们自己解决吧。

5.踩坑

你可以不看就简单分享。第一，在设置页面背景的时候，我考虑过直接在css上设置背景图片，但是有一个问题就是小程序的背景图片只支持在线地址或者base64。我不知道我为什么这么做。真的很迷人。但是行不稳定，base64太长，代码不好看不整齐，可以考虑使用Image组件。

然后第二个坑又来了。图像组件的自带宽很高，在模式下无法满足任何值的要求。如果我设置宽度：100%来填充父元素，默认情况下它的长度仍然是340px，所以我仍然打败了它。首先，我设置宽度不是100%，而是通过wx。* * getsysteminfosync * *()。窗宽；控件的屏幕宽度。然后通过image component的事件得到原始图片的长度和宽度，探索后计算屏幕宽度和原始图片宽度的比值，再将这个比值乘以原始图片的长度，就可以得到一个占据父元素且面向比例的图片，然后在父元素上放overflow:hidden。

第三个坑是背景怎么拼接。想了想，也不是坑。只需在组件的最外层添加一个相同的图像标签，这样标签上就可以显示一半的背景图像，然后下层就可以显示完整的背景图像。因为上面有盖，地下的下部和导航条的上部正好拼接在一起，所以问题就解决了。

摘要

以上是边肖介绍的定制头部导航栏和导航栏背景图的导航方式的问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！