⼩程序⾃定义顶部组件customHeader的⽰例代码1、开启配置⾃定义顶部
{
"window": {
"navigationStyle":"custom"
}
}
在app.json的⽂件window配置"navigationStyle": "custom"属性即可
2、⾃定义顶部计算原理
2.1 获取系统状态栏的⾼度和屏幕宽度
使⽤wx.getSystemInfo这个函数获取系统状态栏的⾼度和屏幕宽度。
2.2 获取右上⾓胶囊位置信息
使⽤wx.getMenuButtonBoundingClientRect()⽅法获取右上⾓胶囊位置信息。
关键问题在于⾃定义胶囊的上、下和左边距。
2.3 ⾃定义顶部距离计算代码
app.js代码如下
App({
// ⼩程序初始化
onLaunch: function() {
// 获取⾃定义顶部⾼度相关参数
let capsuleObj = wx.getMenuButtonBoundingClientRect();
// console.log("==胶囊信息==");
// console.log(capsuleObj);
success: (res) => {
// console.log("==获取系统信息==");
// console.log(res)
var statusBarHeight = res.statusBarHeight; //顶部状态栏⾼度
this.globalData.capsuleObj = capsuleObj;
this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (p - statusBarHeight) * 2; },
failure() {
}
})
},
// 全局缓存
globalData: {
loginStatus: false,
},
})
3、封装⾃定义顶部
3.1效果图展⽰
3.2组件代码
index.wxml
<!--components/customHeader/index.wxml-->
<view class="customHeader_box" >
<!-- 菜单 -->
<view wx:if="{{menuFlag}}" class="menu_box" >
<view class="customIcon" bindtap="meunClick">
<image src="/images/customMenu.png"></image>
</view>
</view>
<!-- 返回+⾸页 -->
<view wx:if="{{backHomeFlag}}" class="backHome_box" > <view class="customIcon backIcon" bindtap="backClick">
<image src="/images/customBack.png"></image>
</view>
<view class="customIcon homeIcon" bindtap="homeClick">
<image src="/images/customHome.png"></image>
</view>
</view>
<!-- 标题 -->
<view class="customHeader_title" >
{{customTitle}}
</view>
</view>
<!-- ⾃定义顶部距离修正 -->
<view class="customWrap" ></view>
index.wxss
/* components/customHeader/index.wxss */
.customHeader_box {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.customIcon {
flex: 1;
}
.customIcon image {
width: 30rpx;
height: 30rpx;
}
/
* 菜单 */
.menu_box{
text-align: center;
box-sizing: border-box;
overflow: hidden;
position: absolute;
left: 10px;
z-index: 11;
display: flex;
justify-content: space-between; align-items: center;
}
.
menu_box .customIcon image{ width: 36rpx;
height: 36rpx;
}
/* 返回+⾸页 */
.backHome_box {
text-align: center;
border: 1px solid #e5e5e5;
border-radius: 20px;
box-sizing: border-box;
overflow: hidden;
position: absolute;
left: 10px;
z-index: 11;
display: flex;
justify-content: space-between; align-items: center;
}
代码转换.backIcon {
border-right: 1rpx solid #e5e5e5; }
/* 标题 */
.customHeader_title {
width: 100%;
padding-left: 115px;
padding-right: 115px;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
text-overflow: ellipsis;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
position: absolute;
left: 0;
z-index: 10;
}
/* ⾃定义顶部距离修正 */
.customWrap{
width: 100%;
position: relative;
left: 0;
z-index: 99998;
}
index.js
// components/customHeader/index.js const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
customTitle: String,
bgColor: {
type: String,
value: '#fff'
},
menuFlag: {
type: Boolean,
value: false
},
backHomeFlag: {
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
},
attached: function() {
this.setData({
titleHeight: app.globalData.titleHeight, capsuleObj: app.globalData.capsuleObj  })
},
options: {
multipleSlots: true, //开启多slot  },
/**
* 组件的⽅法列表
*/
methods: {
// 菜单
meunClick: function () {
wx.navigateTo({
url: '/pages/menu/menu',
})
},
// 返回
backClick: function() {
wx.navigateBack({
delta: 1
})
},
// 回⾸页
homeClick: function() {
wx.navigateTo({
url: '/pages/index/index'
})
},
}
})
index.json
{
"component": true
}
4、组件使⽤⽅法
index.wxml

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。