【微信小程序自学之路】自定义导航栏navigation bar

如何给导航栏navigation bar设置特殊背景图片或者颜色等

给导航栏 navigation bar设置不同的背景颜色

这个比较普遍场景,就是再JSON文件添加背景颜色

1
2
3
4
5
6
{
"navigationBarBackgroundColor": "#FFF",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "一个面试题",
"usingComponents": {}
}

小程序每个page都有自己的JSON文件可以单独配置,在这里面添加 navigationBarBackgroundColor 即可设置背景颜色

给导航栏 navigation bar设置不同的背景色

也就是如何设置自定义的导航栏 navigation bar

小程序官方组件weui支持自定义navigation组件

在使用自定义导航的page模块内 引用组件

1
2
3
4
5
6
{
"navigationStyle": "custom",
"usingComponents": {
"mp-navigation-bar": "/weui/navigation-bar/navigation-bar"
}
}

navigationStyle 设置使用自定义组件
mp-navigation-bar 是定义的自定义组件名,引用的是你真实的组件路径

引用自定义组件

在wxml中引入自定义组件

1
2
3
4
5
6
7
8
...
<mp-navigation-bar
show="{{show}}"
background="{{background}}"
title="Navigation"
back="{{true}}"
></mp-navigation-bar>
...
1
2
3
4
5
data: {
color: '#000',
background: '#fff url(/images/miniapp-1.jpg)',
show: true
}

重新编译小程序后,既可以看到自定义的导航栏组件,导航栏背景图片

自定义导航栏组件问题

默认page下,视图窗口是 红色区域


默认情况下]

但是 当我们设置了自定义导航栏的时候,视图窗口区域扩大了,变成如下红色区域,


默认情况下]

因此得注意下一些定位元素,如fixed的坐标,以及初始元素渲染位置等等

坚持原创技术分享,谢谢鼓励我继续创作!