小程序中实现自定义头部导航组件

在页面中实现自定义头部导航的组件,如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”,如果是项目中所有页面都想使用自定义的组件,可在app.json的window中全局配置"navigationStyle": “custom”。
先分析头部导航的组成,可参考图1
图1
其组成主要包含两部分:状态栏、导航区域,下面分别说说这两部分的高度如何获取。
1、获取状态栏高度
对于不同的机型而言,状态栏的高度是有所差异的,可通过wx.getSystemInfo来获取,但需要注意的是该接口在基础库2.20.1后就停止维护,需要改用wx.getWindowInfo获取。
(1)使用wx.getSystemInfo获取示例代码

wx.getSystemInfo({success: (res) => {this.setData({statusBarHeight: res.statusBarHeight })}
})

在这里插入图片描述
(2)使用wx.getWindowInfo示例代码

 constres = wx.getWindowInfo()this.setData({statusBarHeight: res.statusBarHeight })

2、导航区域高度
(1)导航区域的高度可自己定义,但考虑到右侧胶囊,为使得标题位置垂直居中,因而导航区域的高度实际也需要计算得出。其公式为:导航区域的高度 = 胶囊的高度 + 胶囊距离状态栏的高度 * 2。

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮)布局', rect);

在这里插入图片描述

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮)布局', rect);
wx.getSystemInfo({success: (res) => {this.setData({navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, // navBarHeight: rect.height + (rect.top - res.statusBarHeight) * 2, })}
})

(2)考虑到胶囊位置,因而导航栏区域可自定义的宽度需减去胶囊的宽度,使用padding-right的方式占用胶囊的宽,注意需要设置为box-sizing: border-box,懂得都懂。
在这里插入图片描述

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。const rect = wx.getMenuButtonBoundingClientRect()console.log('右上角胶囊按钮)布局', rect);wx.getSystemInfo({success: (res) => {this.setData({innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,})}})

(3)剩余的宽度你就可以自由发挥了。
以下是组件参考代码
index.xml

<view class="weui-navigation-bar {{extClass}}"><view class="status-bar" style="height: {{statusBarHeight}}px; color: {{color}}; background: {{background}}"></view><view class="weui-navigation-bar__inner" style="height: {{navBarHeight}}px; color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}"><view class='weui-navigation-bar__left' style="{{leftWidth}}"><block wx:if="{{back}}"><view class="navigation-bar__buttons" bindtap="back"><view class="navigation-bar__button navigation-bar__btn_goback" hover-class="active"></view></view></block><block wx:else><slot name="left"></slot></block></view><view class='weui-navigation-bar__center'><view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert"><view class="weui-loading" style="width:{{size.width}}rpx;height:{{size.height}}rpx;" aria-role="img" aria-label="加载中"></view></view><block wx:if="{{title}}"><text>{{title}}</text></block><block wx:else><slot name="center"></slot></block></view><view class='weui-navigation-bar__right'><slot name="right"></slot></view></view>
</view>

index.wxss

.weui-navigation-bar {overflow: hidden;color: rgba(0, 0, 0, .9);width: 100vw;
}
.status-bar{width: 100%;
}
.weui-navigation-bar__placeholder {background: #f7f7f7;position: relative;
}
.weui-navigation-bar__inner, .weui-navigation-bar__inner .weui-navigation-bar__left {display: flex;align-items: center;flex-direction: row;
}
.weui-navigation-bar__inner {position: relative;padding-right: 95px;width: 100vw;box-sizing: border-box;padding-top: env(safe-area-inset-top);
}
.weui-navigation-bar__inner .weui-navigation-bar__left {position: relative;width: 95px;padding-left: 16px;box-sizing: border-box;
}
.weui-navigation-bar__btn_goback_wrapper {padding: 11px 18px 11px 16px;margin: -11px -18px -11px -16px;
}
.weui-navigation-bar__inner .weui-navigation-bar__left .navigation-bar__btn_goback {font-size: 12px;width: 12px;height: 24px;background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;background-size: cover;
}
.weui-navigation-bar__inner .weui-navigation-bar__center {font-size: 17px;text-align: center;position: relative;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;font-weight: bold;
}
@media(prefers-color-scheme: dark) {.weui-navigation-bar {color: hsla(0, 0%, 100%, .8);}.weui-navigation-bar__inner {background-color: #1f1f1f;}
}

index.js

Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表*/properties: {extClass: {type: String,value: ''},title: {type: String,value: ''},background: {type: String,value: '#fff'},color: {type: String,value: '#000'},back: {type: Boolean,value: true},loading: {type: Boolean,value: false},animated: {// 显示隐藏的时候opacity动画效果type: Boolean,value: true},show: {// 显示隐藏导航,隐藏的时候navigation-bar的高度占位还在type: Boolean,value: true,observer: '_showChange'},// back为true的时候,返回的页面深度delta: {type: Number,value: 1}},/*** 组件的初始数据*/data: {displayStyle: '',statusBarHeight: 20},attached() {// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。const rect = wx.getMenuButtonBoundingClientRect()// console.log('右上角胶囊按钮)布局', rect);wx.getSystemInfo({success: (res) => {this.setData({innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,leftWidth: `width:${res.windowWidth - rect.left}px`,// navBarHeight: rect.bottom + rect.top  - res.statusBarHeight,  //84pxnavBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, //40pxstatusBarHeight: res.statusBarHeight //44px})}})},/*** 组件的方法列表*/methods: {_showChange(show) {const animated = this.data.animatedlet displayStyle = ''if (animated) {displayStyle = `opacity: ${show ? '1' : '0'};transition: opacity 0.5s;`} else {displayStyle = `display: ${show ? '' : 'none'}`}this.setData({displayStyle})},back() {const data = this.dataif (data.delta) {wx.navigateBack({delta: data.delta})}this.triggerEvent('back', { delta: data.delta }, {})}}})

index.json

{"component": true,"usingComponents": {}
}

在页面中使用该组件
page.json

{"usingComponents": {"zxm-navigation-bar": "/components/zxm-navigation-bar" //该成你所放组件的路径哟},"navigationStyle": "custom","disableScroll": true
}

page.wxml

<view><zxm-navigation-bar title="标题"></zxm-navigation-bar>
</view>

代码也可前往这里下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE3 学习笔记(12):对比Vuex与Pinia状态管理的基本理解

在组件传值中&#xff0c;当嵌套关系越来越复杂的时候必然会将混乱&#xff0c;是否可以把一些值存在一个公共位置&#xff0c;无须传值直接调用呢&#xff1f;VUEX应运而生&#xff0c;但是从VUE3开始对VUEX的支持就不那么高了&#xff0c;官方推荐使用Pinia。 Vuex配置 ST1:…

深度剖析可视化大屏的技术架构

在当今信息化时代&#xff0c;可视化大屏作为一种重要的信息展示方式&#xff0c;广泛应用于监控指挥中心、数据分析展示等领域。其技术架构对于保障大屏系统的稳定性和性能至关重要。本文将深入探讨可视化大屏的技术架构&#xff0c;包括硬件架构、软件架构和数据架构等方面&a…

VCAST创建单元测试工程

1. 设置工作路径 选择工作目录,后面创建的 UT工程 将会生成到这个目录。 2. 新建工程 然后填写 工程名称,选择 编译器,以及设置 基础路径。注意 Base Directory 必须要为代码工程的根目录,否则后面配置环境会失败。 这样工程就创建好了。 把基础路径设置为相对路径。 …

探索 Adobe Illustrator 2023 (AI 2023) for Mac/Win——创意设计的强大工具

Adobe Illustrator 2023 (AI 2023) for Mac/Win 是一款在设计领域备受推崇的专业矢量图形编辑软件软件&#xff0c;为设计师们提供了无尽的创意可能性。 它具有强大而精确的绘图功能&#xff0c;让用户能够轻松绘制出各种复杂的图形、线条和形状。无论是简洁的图标设计还是精美…

C/C++ 引用和指针的区别及使用场景

C和C中的引用&#xff08;reference&#xff09;和指针&#xff08;pointer&#xff09;都是用于间接访问变量的工具&#xff0c;但它们之间存在一些关键的区别和使用场景。 一、什么是引用&#xff08;Reference&#xff09;&#xff1f; 引用是只有在C中才存在的概念&#…

私立学校当老师稳定吗

作为一名在教育领域摸爬滚打多年的老师&#xff0c;经常会被问到这个问题。私立学校当老师&#xff0c;稳定吗&#xff1f;这个问题没有答案&#xff0c;因为有太多种影响因素&#xff0c;比如学校的管理、个人的职业规划以及教育市场的现状。 私立学校的工作环境通常比公立学校…

hadoop部署hdfs

需要3台机子&#xff0c;Linux为centos7 分别设置静态ip&#xff0c;设置主机名,配置主机名映射&#xff0c;配置ssh免密登入 hadoop1 192.168.123.7 hadoop2 192.168.123.8 hadoop3 192.168.123.9 vi /etc/sysconfig/network-scripts/ifcfg-ens33TYPE"Ethernet"…

代码随想录算法训练营第四十二 | ● 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

** 01背包问题 二维 ** 01背包问题 二维 https://programmercarl.com/%E8%83%8C%E5%8C%85%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%8001%E8%83%8C%E5%8C%85-1.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1cg411g7Y6 #include <bits/stdc.h> using namespace …

九、参数处理器

debug调试&#xff0c;一个参数的调通了&#xff0c;但是两个参数的会失败 总结一下&#xff1a; 到现在已经学了有10节了&#xff0c;我对mybatis底层的执行流程算是挺了解的了&#xff0c;把流程拆解开&#xff0c;每一个小步骤都是非常多的代码实现&#xff0c;代码都能看懂…

25、matlab随机数生成汇总:控制随机数生成器、均匀分布和正态分布的随机数

1、rng:控制随机数生成器 语法 rng(seed,generator) 还指定随机数生成器要使用的算法。 参数 seed &#xff1a;随机数种子 s &#xff1a;随机数生成器设置 generator &#xff1a;随机数算法 "twister" | "simdTwister" | "combRecursive…

【Python】 探索Pytz库中的时区列表

基本原理 Python 是一种广泛使用的高级编程语言&#xff0c;它提供了许多库来帮助开发者完成各种任务。在处理时间和日期时&#xff0c;pytz 库是一个非常重要的工具。pytz 是一个提供时区处理功能的Python库&#xff0c;它允许开发者在Python中使用时区信息。 pytz 库基于 I…

2021JSP普及组第二题:插入排序

2021JSP普及组第二题 题目&#xff1a; 思路&#xff1a; 题目要求排序后根据操作进行对应操作。 操作一需要显示某位置数据排序后的位置&#xff0c;所以需要定义结构体数组储存原数据的位置和数据本身排序后所得数据要根据原位置输出排序后的位置&#xff0c;所以建立一个新…

Google Gemini API 使用入门及其集成 Android 应用程序

Google 的 Gemini SDK 是一款功能强大的工具,可直接访问 Android 应用程序中的 Gemini AI 模型。此集成简化了应用程序开发,因为开发人员无需管理复杂的后端 AI 基础架构。让我们深入了解如何将 Gemini 的功能引入您的 Android 项目。 Gemini API 使用入门及其集成 Android 应…

新手快速上手IDEA【常用快捷键】

目录 一、常用二、进阶&#xff08;提高编码速度&#xff09;三、其他四、查找、替换与关闭最后 一、常用 说明快捷键复制代码ctrl c粘贴ctrl v剪切ctrl x撤销ctrl z反撤销ctrl shift z保存-save allctrl s全选-select allctrl a 二、进阶&#xff08;提高编码速度&a…

Android开机动画,framework修改Bootanimation绘制文字。

文章目录 Android开机动画&#xff0c;framework修改Bootanimation动画绘制文字。opengl绘制源码分析 Android开机动画&#xff0c;framework修改Bootanimation动画绘制文字。 frameworks/base/cmds/bootanimation/bootanimation.cpp 绘制时间的一个方法 // We render 12 or …

知识图谱源码笔记

目录 2018年文档生成知识图谱 30多个知识图谱源码 讲原理的 文档生成知识图谱 2018年文档生成知识图谱 https://github.com/liuhuanyong/TextGrapher 30多个知识图谱源码 参考&#xff1a;【回答问题】ChatGPT上线了&#xff01;推荐30个以上比较好的构建知识图谱源码_c…

开放平台接口安全验证

文章目录 开放平台接口安全验证I 加签方式说明1.1 签名生成的通用步骤1.2 生成随机数算法1.3 举例1.4 签名校验工具II Header参数说明III 业务接口返回结构说明开放平台接口安全验证 统一使用sign签名验证,签名规则也会在本文档中,详细说明。请大家认真阅读。 向平台申请密码…

江苏双线服务器租用该怎样管理?

在选择江苏双线服务器租用时&#xff0c;需要选择一家靠谱的服务提供商&#xff0c;因为江苏省属于经济发展比较迅速的地区&#xff0c;会有着很多鱼龙混杂的服务提供商&#xff0c;所以我们可以去提供商所在地去进行考察一下&#xff0c;确保服务提供商有着良好的声誉和稳定的…

Linux网络编程:数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…

odoo前端开发环境:深入探索与搭建指南

odoo前端开发环境&#xff1a;深入探索与搭建指南 在Odoo的生态系统中&#xff0c;前端开发环境的搭建对于开发者来说是一个关键而复杂的任务。它不仅涉及技术的选择和应用&#xff0c;还需要对Odoo的架构和机制有深入的理解。本文将从四个方面、五个方面、六个方面和七个方面…