微信小程序自定义头部导航栏和导航栏背景图片navigationStyle问题_navigationBarBackgroundColor - CSDN文库

微信小程序

93 浏览量更新于2023-03-03 评论 2 收藏 96KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序自定义头部导航栏和导航栏背景图片微信小程序自定义头部导航栏和导航栏背景图片

navigationStyle问题问题

主要介绍了微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle功能，本文给大家介绍的非常详

细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现

在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以

用老版本的替换所有页面的小程序头来做。

 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，

屏幕会乱划。所以针对性的改动了这些功能，因为才学小程序两三天，所以其中踩了很多坑，但好在最后效果还是达到了。

下面是效果图：

原理其实就是通过将原来的头禁用，然后PAGE自然而然的顶上去以后，定义一个头的组件，将他设置成fixed布局固定在原来

头的部分，然后给page加上Margin-top，所以还原原来的感觉。背景待会再说。

1.app配置配置

 首先禁用所有头导航，在app.json的window里加一行这个，你会发现所有头都消失了。然后禁止滑动页面，滑动问题用scroll-

view解决

"window": {

"navigationStyle": "custom"

},

"disableScroll": true

 然后在app.js里获取导航头的高度的全局数据

// app.js

App({

globalData: {

statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']

},

// 判断是否由分享进入小程序

if (e.scene == 1007 || e.scene == 1008) {

this.globalData.share = true

} else {

this.globalData.share = false

}

//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）

//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把

//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙

//虽然最后解决了，但是花费了不少时间

wx.getSystemInfo({

success: res => {

this.globalData.height = res.statusBarHeight

}

})

},

globalData: {

userInfo: null,

share: false, // 分享默认为false

height: 0 // 顶部高度

}

})

在app.wxss给page加一个高度百分之百。

/* app.wxss */

page {

height: 100%;

}

 app配置到这里应该完事了。

2.组件配置组件配置

组件结构：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38677505

粉丝: 4
资源: 971

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈