最近公司小程序有个需求 简单来说就是除开首页和我的页面
其他页面左上角都需要有一个返回按钮 能返回首页 最开始我说的是不用做 那两个tabbar页面 下面可以点啊
结果客户那边非得要 没办法 客户就是上帝
那么 话不多说 我们直接开干
首先是新建一个custom-navbar组件 目录结构如下
然后就是考虑到每个机型的状态栏高度不一样 所以需要用wx提供的getSystemInfoSync api
获取到statusBarHeight 状态栏的高度 就是手机电池电量那个区域的高度
const { statusBarHeight } = wx.getSystemInfoSync();
this.globalData.statusBarHeight = statusBarHeight;
拿到statusBarHeight后 可以编写custom-navbar.wxml
<!-- custom-navbar.wxml -->
<view class="navbar" style="height: {{statusBarHeight + 44}}px">
<view class="navbar-content" style="top: {{statusBarHeight}}px;height: 44px;">
<view class="navbar-left" style="cursor: pointer;" bindtap="goBack">
<image src="/assets/img/left.png"></image>
</view>
<view class="navbar-title">{{title}}</view>
<view class="navbar-right" style="opacity: 0;">
<image src="/assets/img/left.png"></image>
</view>
</view>
</view>
statusBarHeight + 44 44是状态栏下面 顶部的高度
对应的custom-navbar.js
// custom-navbar.js
const app = getApp()
Component({
properties: {
title: {
type: String,
value: '页面标题'
}
},
data:{
statusBarHeight: app.globalData.statusBarHeight,
},
methods: {
goBack() {
wx.switchTab({
url: "../home/home",
})
}
},
});
以及custom-navbar.wxss
/* custom-navbar.wxss */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #AB2917;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 简单的阴影效果 */
}
.navbar-left image,
.navbar-right image {
width: 100%;
height: 100%;
}
.navbar-left ,
.navbar-right {
width: 24px;
height: 24px;
}
.navbar-right{
margin-right: 10px;
}
.navbar-left{
margin-left: 10px;
}
.navbar-title {
text-align: center;
font-size: 36rpx; /* 标题字体大小 */
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保标题过长时能够截断并显示省略号 */
background-color: #AB2917;
}
.navbar-content{
width: 750rpx;
background-color: #AB2917;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-content view{
background-color: #AB2917;
}
好的 那么 组件写完了就是在页面上使用了 记得在页面的json中声明navigationStyle=“custom” 表示使用自定义导航栏哦 顺便引用组件(如果要全局使用 就要在app.json中写)
{
"usingComponents": {
"custom-navbar": "../../component/custom-navbar/custom-navbar"
},
"navigationStyle":"custom"
}
千万记得调整一下页面的margin-top哦
<view class="clear">
<custom-navbar title="视频专区"></custom-navbar>
<view `style="margin-top: {{44 + statusHeight + 10 }}px;`"></view> /*一定一定一定要记得加 10是离状态栏+顶部的高度*/
</view>
本人写这篇文章的初衷是记录 方便以后用到的时候可以直接来找
如果有写的不对的地方 欢迎评论区留言