已更新！！
根据当前需求封装的，ios标题居中，安卓上靠左，可能有点垃圾，希望给位指正
首先要在封装的page.json文件下写入:
"navigationStyle":"custom",
在app.js中定义全局获取顶部高度
创建导航栏组件navigation（名字自定义）
// 获取屏幕参数
try {
const res = wx.getSystemInfoSync()
if (res.platform == 'ios') {
_this.globalData.platform = 'ios'
} else if (res.platform == 'android') {
_this.globalData.platform = 'android'
}
let navHeight = res.statusBarHeight
_this.globalData.screenWidth = res.screenWidth
_this.globalData.screenHeight = res.screenHeight
_this.globalData.statusBarHeight = res.statusBarHeight
_this.globalData.pixelRatio = res.pixelRatio
_this.globalData.winWidth = res.windowWidth
if (res.system.indexOf('Android') !== -1) {
_this.globalData.navHeight = navHeight + 14 + 32
_this.globalData.navTitleTop = navHeight + 8
_this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
_this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
} else {
_this.globalData.navHeight = navHeight + 12 + 32
_this.globalData.navTitleTop = navHeight + 4
_this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
_this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
}
// console.log(wx.getSystemInfoSync(), _this.globalData.winHeightTab)
} catch (e) {
// console.log(e)
}
在globalData中定义
globalData: {
navHeight: 64, //手机顶部高度
navTitleTop: 26,//手机顶部top值
platform: 'ios',//手机型号
}
navigate组件中的内容
<view>
<view class="nav-bar {
{isWhite=='true'?'nav-bar-white':''}}"
style="height: {
{navHeight}}px;background-color:{
{navColor}};" catchtap="toTop">
<text class="navbar-title"
style="top:{
{navTitleTop}}px;color:{
{navTitleColor}};{
{phoneType == 'android' ? 'width:auto;text-algin:left;left:9%;':'font-weight:bolder;'}}">{
{
title}}</text>
<view wx:if="{
{returnStatus}}" catchtap="returnClick"
class="navbar-icon-wrap" style="top:{
{navTitleTop}}px;" data-returnstatus="{
{returnStatus}}"
data-pageStack="{
{pageStack}}" data-returnStatusContent="{
{returnStatusContent}}" data-special="{
{special}}">
<image class="navbar-icon" src="../../assets/images/return.png" mode="widthFix"></image>
</view>
</view>
</view>
/* component/navigateion/navigateion.wxss */
.box {
height: 178rpx;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 28rpx 19rpx;
box-sizing: border-box;
font-size: 30rpx;
/* padding-bottom: 18rpx; */
position: relative;
background: #fff;
}
.box-imagebox {
position: absolute;
left: 6rpx;
bottom: 25rpx;
width: 100rpx;
height: 100rpx;
/* background-color: red; */
}
.box image {
width: 32rpx;
/* height: 42rpx; */
position: absolute;
left: 6px;
bottom: 7rpx;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999999;
}
.nav-bar-white {
background-color: #fff;
}
.navbar-title {
position: absolute;
height: 64rpx;
line-height: 64rpx;
/* width: 100%; */
width: 320rpx;
text-align: center;
font-size: 32rpx;
color: #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
left: 28%;
}
.navbar-icon-wrap {
position: absolute;
left: 3px;
width: 70rpx;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar-icon {
width: 16px;
height: 32rpx;
}
.navbar-scan {
width: 28px;
height: 28px;
}
const app = getApp()
Component({
properties: {
// 标题
title: {
type: String,
value: ''
},
// 发起页面路径
pageStack: {
type: String,
value: ''
},
returnStatus: {
type: String,
value: ''
},
returnStatusContent: {
type: String,
value: ''
},
special: {
type: String,
value: ''
},
navHeight: {
type: Number,
value: 20
},
navTitleTop: {
type: Number,
value: 26
},
navTitleColor: {
// 导航标题颜色 默认黑色
type: String,
value: '#000'
},
isWhite: {
// 是否为白底
type: String,
value: 'true'
},
}
data: {
navHeight: 0,
navTitleTop: 0,
phoneType: app.globalData.platform,
},
attached() {
// 在组件实例进入页面节点树时执行
// 获取顶部导航高度
this.setData({
navHeight: app.globalData.navHeight,
navTitleTop: app.globalData.navTitleTop,
phoneType: app.globalData.platform,
})
},
})
使用页面中的page.json
"usingComponents": {
"navigateion-bar" : "../../../component/navigateion/navigateion"
},
使用页面的page.wxml
<navigateion-bar title='添加银行卡' pageStack="{
{pageStack}}" returnStatus="true"/>