微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
163 浏览量
2020-10-16
15:44:21
上传
评论 2
收藏 96KB PDF 举报
微信小程序自定义头部导航栏和导航栏背景图片微信小程序自定义头部导航栏和导航栏背景图片
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.组件配置组件配置
组件结构：
资源评论
weixin_38677505
- 粉丝: 4
- 资源: 971
