const app = getApp() Component({ properties: { navbarData: { //navbarData 由父页面传递的数据，变量名字自命名 type: Object, value: {}, observer: function(newVal, oldVal) {} } }, data: { height: '', //默认值 默认显示左上角 navbarData: { showCapsule: 1 }, imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度 imageHeight: '' // 背景图片的长度，通过计算获取 }, attached: function() { // 获取是否是通过分享进入的小程序 this.setData({ share: app.globalData.share }) // 定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { // 返回上一页面 _navback() { wx.navigateBack() }, // 计算图片高度 imgLoaded(e) { this.setData({ imageHeight: e.detail.height * (wx.getSystemInfoSync().windowWidth / e.detail.width) }) } //返回到首页 // _backhome() { // wx.switchTab({ // url: '/pages/index/index' // }) // } } })
大概就是这么多，怎么在页面上用呢
3.具体页面配置
页面的HTML，我是内容里面放页面的东西。
<nav-bar navbar-data='{{nvabarData}}'></nav-bar> <scroll-view scroll-y> <view>我是内容</view> </scroll-view>
页面的JSON，navigationBarTextStyle是用来配置胶囊颜色的，因为胶囊是微信给的，不能自定义，只能改颜色，所以委屈一下从这里改一下吧
{ "usingComponents": { "nav-bar": "../../components/navbar/navbar" }, "navigationBarTextStyle": "white" }
页面JS,图片自己填上地址就好了。注意getApp()不要省。
const app = getApp() Page({ data: { // 导航头组件所需的参数 nvabarData: { showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示 title: '标题', //导航栏 中间的标题 white: true, // 是就显示白的，不是就显示黑的。 address: '../../images/蒙版组 1@2x.png' // 加个背景 不加就是没有 }, // 导航头的高度 height: app.globalData.height * 2 + 20 } })
4.存在的问题
上拉刷新
我没有试过哈，不过原生的微信上拉刷新这么用是准定不行了，如果喜欢IOS橡皮筋模式的同学或者想要刷新的同学可以在具体页面里删掉scroll-view组件换成view（记得保留那个padding-top！），然后把app.json的禁用滑动删除掉。具体的我也没有深入，大家自行解决吧。
5.踩的坑
单纯分享下，不看也可以，首先就是设置页面的背景的时候，我考虑过直接在css上设置background image，但是有一个问题是，小程序的background image 只支持在线的地址或者是base64。我不知道为什么要这么做。真的很迷。但是线上的不稳定，base64太长了,代码不好看也不好整理，所以考虑了一下还是用Image组件吧。
然后第二个坑又来了，image组件自带宽高，而且用Mode里的任何值都不能完成需求。如果我设置成width:100%占满父元素的话，他的长还是默认的340px,所以还是鼓捣了鼓捣，先设置宽度不是100%了，而是通过wx.**getSystemInfoSync**().windowWidth；来获取的屏幕宽度。然后再通过image组件的事件获取原图的长宽，探后计算屏幕宽和原图宽的率，然后再将这个率乘上原图长度，就可以获取到一个占满父元素又对着比例的图了，然后给父元素套上overflow:hidden就好了。
第三个坑，就是怎么做背景的拼接，想了想也不是个坑，直接在组件的最外层再加一个一模一样的image标签就行了，这样就做到了标签上显示半个背景图，然后在他的下层又能显示一个完整的背景图，因为上面被盖住了，所以地下的下半部分和导航栏的上半部分背景正好拼接起来，所以问题也就这么解决了。
总结
以上所述是小编给大家介绍的微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: