导航栏背景图
要自定义导航栏，首先需要在app.json里设置：
{
"window": {
"navigationStyle": "custom"
}
}
设置之后进入小程序就只剩下右上角的胶囊了。
在设置导航栏样式时需要知道它的高度，在app.json的onLaunch里获取状态栏高度：
App({
onLaunch: function(options) {
wx.getSystemInfo({
success: (res) => {
this.globalData.statusBarHeight = res.statusBarHeight
this.globalData.navBarHeight = 44 + res.statusBarHeight
}
})
},
globalData: {
statusBarHeight: 0,
screenHeight: 0
}
})
44是导航栏除去状态栏的高度，单位px。
因为导航栏每个页面都会用到，所以我们用组件会方便使用一些，这里创建一个叫nav的组件：
首先在组件js里设置statusBarHeight和一个可以通过外部设置状态栏颜色的backgroundColor的属性，默认透明。
nav.js:
const app = getApp()
Component({
options: {
multipleSlots: true
},
properties: {
backgroundColor:{
type: String,
value: 'rgba(0,0,0,0)'
}
},
data: {},
ready() {
let {
statusBarHeight,
navBarHeight
} = app.globalData;
this.setData({
statusBarHeight,
navBarHeight
})
},
methods: {
back() {
wx.navigateBack({
delta:1
})
}
}
})
content里放置内容，返回按钮固定在左边。
nav.wxml:
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<slot name="content"></slot>
<view class='back' bindtap='back'></view>
</view>
</view>
nav.wxss:
.nav-wrap {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
z-index: 1;
}
.content {
position: relative;
width: 100%;
height: 44px;
}
.back {
position: absolute;
left: 0;
top: 0;
width: 88px;
height: 44px;
background: pink;
}
在页面中使用：
<nav bgColor="black">
<view slot="content">
<view class='txt'>Nav title</view>
</view>
</nav>
<view>page content</view>
效果图：
效果图
这里txt里的样式、内容都是可以自定义的，如果想要使用通用样式，可以写在组件里。
比如把导航栏title放在组件里，通过外部传值设置：
nav.js:
Component({
// ...
properties: {
title:{
type: String,
value: ''
}
},
// ...
})
nav.wxml:
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class="title">{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
nav.wxss:
/* ... */
.title {
color: white;
text-align: center;
line-height: 44px;
font-weight: 500;
}
/* ... */
调用<nav bgColor="black" title="hello">就可以了。
在第一次使用nav组件的页面代码中，page content是看不见的，因为是直接从状态栏开始显示的，被nav挡住了。
这里可以加一个高度为导航栏高度的view当做顶部padding：
nav.wxml
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class="title">{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>
这里在properties里设置了一个hastop，用来控制是否有顶部padding。
页面中：
<nav bgColor="black" title="Nav title" hastop></nav>
<view>page content</view>
这样就可以显示出来了：
导航栏背景图
还可以做导航栏背景图，添加一个image，绝对定位放置在nav-wrap底部：
nav.wxml
<view class='nav-wrap' style="background-color:{{bgColor}};">
<image class='bgimg' wx:if="{{bgsrc}}" src='{{bgsrc}}' mode='aspectFill'></image>
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class='title'>{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>
nav.wxss
.bgimg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
页面：
<nav bgColor="black" title="Nav title" hastop bgsrc="/images/bg.jpeg"></nav>
<view>page content</view>
全屏背景
将bgColor、hastop、bgsrc都去掉，在页面中放置一个position: fixed;，并且铺满全屏的图片。
<nav title="Nav title"></nav>
<image class='pagebg' src='/images/bg.jpeg' mode='aspectFill'></image>
全屏背景
back的内容自定义就行了，我这里只是简单放置了一个色框。
注意事项
官方文档中的注意事项：
- 注1：HexColor（十六进制颜色值），如"#ff00ff"
- 注2：关于navigationStyle
- 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
- 客户端 6.7.2 版本开始，navigationStyle: custom 对 <web-view> 组件无效
- 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
网友评论