微信小程序沉浸式状态栏

 

topBar.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'>

<image src="../../pages/images/back.png"></image>

</view>

</view>

</view>

topBar.js

   

const app = getApp();

Component({

options: {

multipleSlots: true,

},

properties: {

backgroundColor: {

type: String,

value: 'rgba(0,0,0,0)'

},

title: {

type: String,

value: ''

},

back: {

type: String,

value: ''

}

},

data: {},

ready() {

let {

statusBarHeight,

navBarHeight

} = app.globalData;

 

this.setData({

statusBarHeight,

navBarHeight

})

},

methods: {

back() {

wx.navigateBack({

delta: 1

})

}

}

})

 

    topBar.wxss

.nav-wrap {

overflow: hidden;

position: fixed;

top: 0;

left: 0;

width: 750rpx;

z-index: 1;

}

 

.content {

position: relative;

width: 100%;

height: 44px;

overflow: hidden;

}

 

.back {

position: absolute;

left: 0;

top: 0;

width: 88px;

height: 44px;

/* background: pink; */

line-height: 44px;

}

 

.back image {

height: 25px;

width: 30px;

vertical-align: middle;

}

 

.title {

color: red;

text-align: center;

line-height: 44px;

font-weight: 500;

height: 44px;

}

 

topBar.json

         

使用方法