业务背景:原生小程序头部单调,没有回到首页按钮,无法用图片作为背景,无法设置渐变色,想动态控制是否展示header,总之 都有
话不多说,上码,粘过去直接用
app.js:
onLaunch: function (options) {
...
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight, // 状态栏的高度
navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData._h = menuButtonObject.height;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
...
}
组件相关:
header.html
<view class="headerbox custom-header-class" wx:if="{{customParameter.showheader}}" style="height:{{navHeight}}px;background:{{b_g_img}}">
<view class="header_left" style="top:{{navTop}}px;">
<view class="back _inline custom-header-back" bindtap="back" wx:if="{{show_back=='show'}}">
<view class="back_"></view>
</view>
<image class="homes" bindtap="gohome" wx:if="{{show_home == 'show'}}" src="https://img.miyabaobei.com/d1/p6/2020/03/26/db/5c/db5c1aa16d5d15ada15e31edccf2a55e185141541.png"></image>
</view>
<view class="title _inline custom-header-title" wx:if="{{showpageName}}" style="top:{{navTop}}px;">
{{pageName}}
</view>
</view>
header.js
const App = getApp();
Component({
options: {
addGlobalClass: true,
},
properties: {
pageName: String,
customParameter: {
type: Object,
},
showLeft: {
type: Boolean,
value: false
},
},
data: {
b_g: ''
},
lifetimes: {
attached: function () {
this.setData({
navHeight: App.globalData.navHeight, // header高度
navTop: App.globalData.navTop, // 文字距离顶部高度
pageName: this.data.customParameter.pageName || '标题',
show_back: this.data.customParameter.show_back || 'show',
show_home: this.data.customParameter.show_home || 'noshow',
b_g_img: this.data.customParameter.b_g_img,
showpageName: this.data.customParameter.showpageName,
// pagebg: this.data.customParameter.pagebg,
})
}
},
methods: {
back: function () {
wx.navigateBack({
delta: 1
})
},
gohome: function () {
wx.navigateTo({
url: "/pages/index/index"
})
},
},
})
header.css:
.headerbox {
width: 100%;
height: auto;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.header_left {
display: flex;
align-items: center;
position: absolute;
z-index: 11;
height: 32px;
}
._inline {
display: inline-block;
}
.title {
width: 100%;
box-sizing: border-box;
padding-left: 115px;
padding-right: 115px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #fff;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.back {
width: 50rpx;
height: 50rpx;
}
.back_ {
width: 20rpx;
height: 20rpx;
border-bottom: 2rpx solid #000;
border-left: 2rpx solid #000;
transform: rotate(45deg);
margin-right: -50rpx;
margin-left: 20rpx;
margin-top: 16rpx;
}
.homes {
width: 50rpx;
height: 50rpx;
}
页面相关:
test_header.wxml
<header custom-header-class="custom-header-class" custom-header-back="custom-header-back" custom-parameter="{{parmClection}}" custom-header-title="custom-header-title"></header>
test_header.js
Page({
data: {
parmClection:{
pageName:"进度查询", //文案
showpageName:true, //是否展示文案
show_back: 'show', // 返回按钮是否展示
b_g_img:"linear-gradient(270deg, #6DCAD6 0%, #07BFBB 100%)", // 头部背景色
show_img:true, // 图片和背景展示
showheader: true, //header是否展示
// pagebg:"#FAF7FA",
show_home:'', //去首页是否展示
},
},
})
test_header.json
***navigationStyle 这个必须要有,不然原生自带的头部依然会存在
{
"navigationStyle": "custom",
"usingComponents": {
"header":"../../components/header/header"
}
}
说明:只是初步实现了效果,可能不是很完善,欢迎大佬讨论交流
觉得不错,赏个关注呗😀,不胜感激Thanks♪(・ω・)ノ