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
使用方法
