首页 > 编程语言 >微信小程序 自定义 头部导航栏

微信小程序 自定义 头部导航栏

时间:2024-08-02 18:17:23浏览次数:12  
标签:right 自定义 navbar 微信 statusBarHeight custom color 导航 页面

最近公司小程序有个需求 简单来说就是除开首页和我的页面
其他页面左上角都需要有一个返回按钮 能返回首页 最开始我说的是不用做 那两个tabbar页面 下面可以点啊
结果客户那边非得要 没办法 客户就是上帝

那么 话不多说 我们直接开干

首先是新建一个custom-navbar组件 目录结构如下

image.png

然后就是考虑到每个机型的状态栏高度不一样 所以需要用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是状态栏下面 顶部的高度

image.png

对应的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>      

本人写这篇文章的初衷是记录 方便以后用到的时候可以直接来找
如果有写的不对的地方 欢迎评论区留言

标签:right,自定义,navbar,微信,statusBarHeight,custom,color,导航,页面
From: https://www.cnblogs.com/ly5926/p/18339343

相关文章

  • 关于自定义实现input
    最近遇到一个功能,让input输入框根据输入内容的多少自己撑开宽度,试了试原生的input标签,发现有默认宽度,所以找了找原理,自己实现一个input实现原理比较简单动态获取dom元素增加input事件然后给想要显示的元素附上输入的内容上效果图截图 上vue2示例代码<template><div>......
  • Android 自定义图片拖动、缩放、旋转
    Android图片拖动、缩放、旋转图片拖动定义一个类,继承AppCompatImageViewpublicclassMyImageViewextendsAppCompatImageView{//实现方法publicMyImageView(Contextcontext){this(context,null);}//实现方法publicMyImageView(Cont......
  • HarmonyOS:如何实现自定义的Tabs,TabContent内部实现如何动态配置
    前言:最近做开发任务的时候,想把Tabs自定义了,并且动态配置TabContent里面的内容,不是写死一样的,这个问题困扰了很长时间,试过**@BuilderParam**(类似于vue的插槽)传组件方式的,但是**@BuilderParam只能传一个,我想要传递的是一个数组,找了很多Api最后找到了WrappedBuilder[]**这种方......
  • Linux安装微信(非wine版,非U麒麟版)功能全面(ubuntu,kali,debin)
    1、安装Flatpak 要在Ubuntu18.10(CosmicCuttlefish)或更高版本上安装Flatpak,只需运行: $sudoaptinstall flatpak 对于较旧的Ubuntu版本,建议使用官方FlatpakPPA来安装Flatpak。要安装它,请在终端中运行以下命令: $sudoadd-apt-repositoryppa:flatpak/stab......
  • 分享一个流量主微信小程序
        上图也是成功的开通了小程序流量主哦~可以私信我要源码~大家可以扫码体验一下我个人开发的小程序~......
  • 云盒子内网IM,类微信的内网即时通讯工具
    私有化部署的内网IM云盒子内网IM(即时通讯)系统,专为构建安全高效的内网沟通环境而设计,采用私有化部署方式,确保企业数据的安全性与隐私保护,无论是部门间的日常文字、语音交流、还是项目文档的实时同步,还是各类紧急事务的通知,都能云盒子内网IM完成,提升信息流通速度。像微信一......
  • uni-app h5 使用微信JSSDK的方式
    综合各方经验及文档总结了以下我的使用方法,希望对有需要的同学有些帮助第一步:npminstalljweixin-module--save第二步:common文件夹新建js文件,我这里命名jwx.js jwx.js文件内容varjWeixin=require('jweixin-module');exportdefault{//判断是否在微信中......
  • 微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
     ......
  • 自定义的 systemd 服务启动方式
    目录systemd单元文件(UnitFile)单元文件结构示例单元文件1.基础单元文件2.带有环境变量的单元文件3.自定义的ExecStartPre和ExecStartPost配置管理日志管理1.系统日志:2.应用程序日志:3.用户日志:使用prometheus配置实例1.配置prometheus2.配置alertmana......
  • UE5-自定义插件使用第三方库
    制作插件使用到了第三方库,后面很长时间没有用这个插件,导致插件启用不了,吃亏了,所以记录下制作过程。第一步:在继承ModuleRules的C#脚本里添加代码:privatestringModulePath { get { returnModuleDirectory; } } privatestringThirdPartyPath { get{re......