微信小程序提供的状态栏,只能设置标题,如果想要增加返回按钮和回到主页等按钮操作,只能使用自定义格式替换。
先在app.json 设置导航栏格式为"navigationStyle": "custom"。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
自定义一个状态栏组件navbar,组件必须要在json文件里面设置"component": true,申明这是一个组件模块。
<!--components/navbar/navbar.wxml-->
<view style="height:{{navigationBarHeight}}px;background:white">
<view style="height:{{statusBarHeight}}px"></view>
<view class="bar-style">
<view class="back-style" bindtap="backClick" wx:if="{{back}}">
<image></image>
</view>
<view class="home-style" bindtap="homeClick" wx:if="{{home}}">
<image></image>
</view>
<text class="title">{{title}}</text>
</view>
</view>
/* components/navbar/navbar.wxss */
.bar-style{
display: flex;
height: 44px;
flex-direction: row;
width: 100%
}
.back-style, .home-style{
margin-left: 16rpx;
justify-content: flex-start;
width: 56rpx;
background: green;
align-items: center;
display: flex;
flex-direction: row;
z-index: 1;
text-align: center
}
.title{
text-align: center;
font-size: 18px;
height: 44px;
position: absolute;
left: 10px;
right: 10px;
text-overflow: ellipsis;
justify-content: center;
align-items: center;
white-space: nowrap;
display: flex
}
// components/navbar/navbar.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: "biaoti"
},
back:{
type:Boolean,
value:false
},
home:{
type:Boolean,
value:false
},
backhome:{
type:Number,
value:0
}
},
/**
* 组件的初始数据
*/
data: {
statusBarHeight: app.globalData.statusBarHeight,
navigationBarHeight: app.globalData.statusBarHeight + 44,
},
/**
* 组件的方法列表
*/
methods: {
backClick:function(){
console.log("back btn")
},
homeClick:function(){
console.log("home btn")
}
}
})
app.js文件里面加入获取状态栏高度。
globalData: {
userInfo: null,
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] //状态栏高度
}
在使用时候,在使用page的json文件定义组件路径,或者在全局app.json里面定义,则所有页面都可以使用当前组件。
"usingComponents": {
"navbar": "components/navbar/navbar"
}
使用组件,组件里面属性为boolean时候,使用需要"back="{{false}}",直接食用back={{false}}不然不会生效,必须要加""。
<view >
<navbar title="标题" back="{{false}}" home="{{false}}"></navbar>
</view>