uniapp 自定义导航栏

自定义导航栏

修改 pages.json

在 pages.json 中将 navigateionStyle 设为 custom

image-20231013124909430

新建 systemInfo.js

systemInfo.js 用来获取当前设备的机型系统信息，放在 common 目录下

image-20231013130951574

/*** 此 js 文件管理关于当前设备的机型系统信息*/
const systemInfo = function() {/****************** 所有平台共有的系统信息 ********************/// 设备系统信息let systemInfomations = uni.getSystemInfoSync()// 机型适配比例系数let scaleFactor = 750 / systemInfomations.windowWidth// 当前机型-屏幕高度let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx// 当前机型-屏幕宽度let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx// 状态栏高度let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx// 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度let navHeight = 0 //rpx/****************** 微信小程序头部胶囊信息 ********************/// #ifdef MP-WEIXINconst menuButtonInfo = wx.getMenuButtonBoundingClientRect()// 胶囊高度let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx// 胶囊宽度let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx// 胶囊上边界的坐标let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx// 胶囊右边界的坐标let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx// 胶囊下边界的坐标let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx// 胶囊左边界的坐标let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2// #endif// #ifdef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight,menuButtonHeight,menuButtonWidth,menuButtonTop,menuButtonRight,menuButtonBottom,menuButtonLeft,navHeight}// #endif// #ifndef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight}// #endif
}export {systemInfo
}

新建组件 HeadNav

<!--注意：1、在传入宽度或者高度时，如果是Number数据，传入的值为px大小,无需带单位，组件自动计算2、在使用此导航栏时，建议传入UI规定的导航栏高度，此高度只针对除微信小程序的其他平台有效，微信小程序的导航栏高度，组件自计算
-->
<template><view :style="{height:navHeight+'rpx'}"><!-- 微信小程序头部导航栏 --><!-- #ifdef MP-WEIXIN --><view class="wx-head-mod" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}"><view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}"><view class="wx-head-mod-nav-content":style="{height:customHeight+'rpx',justifyContent:textAlign === 'center'?'center':'left'}"><!-- 文本区 --><view class="wx-head-mod-nav-content-mian":style="{width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">{{textContent}}</view><!-- 返回按钮 --><view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}"@click="backEvent"><view class="wx-head-mod-nav-content-back-img":style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}"><image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image></view></view></view></view></view><!-- #endif --><!-- 除微信小程序之外的其他设备 --><!-- #ifndef MP-WEIXIN --><view class="other-head-mod":style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}"><view class="other-head-mod-mian":style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign === 'center'?'center':'left'}"><!-- 返回按钮 --><view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent"><view class="other-head-mod-mian-back-img":style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}"><image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image></view></view><!-- 标题 --><view class="other-head-mod-mian-title" :style="{width:windowWidth - 184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">{{textContent}}</view></view></view><!-- #endif --></view>
</template><script>const app = getApp()import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'export default {name: "HeadView",props: {// 文本区域位置 left：左  center：中  textAlign: {type: String,default: 'center'},// 文本区内容textContent: {type: String,default: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好还'},// 文本区离左边的距离textPaddingLeft: {type: Number,default: 16},// 是否需要返回按钮isBackShow: {type: Boolean,default: true},// 文本区字体大小fontSize: {type: Number,default: 20 //px},// 文本区字体粗细fontWeight: {type: Number,default: 700},// 文本区返回按钮图片宽backImageWidth: {type: Number,default: 12 //px},// 文本区返回按钮图片高backImageHeight: {type: Number,default: 24 //px},// 返回按钮图标路径backImageUrl: {type: String,default: '/static/v2/aichat/ai_robot.png'},// 导航栏整体背景颜色navBackgroundColor: {type: String,default: '#2476F9'},// 标题字体颜色titleColor: {type: String,default: '#ffffff',},/******** h5端，app端需要传入自定义导航栏高度 *******/navHeightValue: {type: Number,default: 44 //px}},computed: {// 文本区宽度navTextWidth() {if (this.textAlign === 'center') {return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'} else {return this.menubarLeft + 'rpx'}},// 文本区paddingLefttextPaddingleft() {if (this.textAlign === 'center') {return '0'} else {return this.textPaddingLeft + 'rpx'}}},data() {return {statusBarHeight: app.globalData.statusBarHeight, //状态栏高度navHeight: app.globalData.navHeight, //头部导航栏总体高度navigationBarHeight: app.globalData.navigationBarHeight, //导航栏高度customHeight: app.globalData.customHeight, //胶囊高度scaleFactor: app.globalData.scaleFactor, //比例系数menubarLeft: app.globalData.menubarLeft, //胶囊定位的左边leftwindowWidth: app.globalData.windowWidth * app.globalData.scaleFactor};},methods: {backEvent() {uni.navigateBack({delta: 1})}},created() {/* 获取设备信息 */const SystemInfomations = systemInfo()/* 通用平台 */this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度this.scaleFactor = SystemInfomations.scaleFactor //比例系数this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度/* 微信小程序平台 */// #ifdef MP-WEIXINthis.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离// #endifconsole.log("this.navHeight:", this.navHeight)}}
</script><style>/* #ifdef MP-WEIXIN */.wx-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;}.wx-head-mod-nav {box-sizing: border-box;width: 100%;position: absolute;left: 0;display: flex;justify-content: center;align-items: center;}.wx-head-mod-nav-content {box-sizing: border-box;width: 100%;display: flex;justify-content: left;align-items: center;position: relative;}/* 文本区 */.wx-head-mod-nav-content-mian {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}/* 返回按钮 */.wx-head-mod-nav-content-back {box-sizing: border-box;width: 60rpx;height: 100%;/* background-color: aqua; */position: absolute;top: 0;left: 32rpx;display: flex;align-items: center;justify-content: left;}.wx-head-mod-nav-content-back-img {box-sizing: border-box;}/* #endif *//* #ifndef MP-WEIXIN */.other-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;}.other-head-mod-mian {box-sizing: border-box;width: 100%;display: flex;align-items: center;justify-content: left;position: absolute;left: 0;bottom: 0;}/* 返回按钮 */.other-head-mod-mian-back {box-sizing: border-box;height: 100%;width: 60rpx;position: absolute;left: 32rpx;top: 0;display: flex;align-items: center;}/* 标题 */.other-head-mod-mian-title {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}/* #endif */
</style>

使用

引入组件，使用

<template><view><HeadNav text-content="测试导航栏" nav-background-color="#fff"></HeadNav>aaa</view>
</template><script>import HeadNav from '@/components/HeadNav.vue'export default {components: {HeadNav},data() {return {title: 'Hello',}},onLoad() {},methods: {}}
</script><style>
body {background-color: aliceblue;
}
</style>

如果需要定义状态栏前景字体的颜色，可以设置 navigationBarTextStyle ，只能设置 white 或 black

{"pages": [{"path": "pages/index/Index","style": {"navigationBarTextStyle": "black"}}],"globalStyle": {"navigationStyle": "custom","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

效果

image-20231013134547024

uview 导航栏使用

引入 uview ，根据文档引入

Navbar 自定义导航栏 | uView 2.0 (uviewui.com)

使用 u-navvar

<template><view><!-- 2.0.19支持autoBack，默认为false --><u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true"></u-navbar></view>
</template><script>export default {components: {},data() {return {title: 'Hello',}},onLoad() {},methods: {rightClick() {console.log('rightClick');},leftClick() {console.log('leftClick');}}}
</script><style>body {background-color: aliceblue;}
</style>

效果

image-20231013141209926

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

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

相关文章

Linux系统安装redis并配置为服务

Linux系统安装redis并配置为服务

一、Linux环境 1、下载 官网提供的源码下载地址&#xff1a; https://github.com/redis/redis/archive/7.0.5.tar.gz 2、将源码上传至服务器 3、解压缩 # 将解压缩后的文件放置在同目录的source文件夹下 tar -zxvf redis-7.0.5.tar.gz -C ./source4、编译安装 对源码进行编…
阅读更多...
echarts插件-liquidFill（水球图）

echarts插件-liquidFill（水球图）

echarts插件-liquidFill&#xff08;水球图&#xff09; 1.下载2.引入&#xff1a;3.使用 1.下载 echarts.js下载&#xff1a;https://cdnjs.com/libraries/echarts echarts-liquidfill.js下载&#xff1a;https://github.com/ecomfe/echarts-liquidfill 2.引入&#xff1a; …
阅读更多...
error: the following arguments are required: --model, --data 解决方法

error: the following arguments are required: --model, --data 解决方法

错误原因&#xff1a;Windows下需要缺乏配置参数&#xff0c;需要进行相关参数配置。 解决办法&#xff1a;在Pycharm的编辑设置&#xff0c;加上–model--model ****,其中****为指定的模型名称&#xff0c;按照自己实际报错进行添加&#xff0c;比如我这里要跑的模型为bert&am…
阅读更多...
获取Android签名文件的MD5和SHA1指纹

获取Android签名文件的MD5和SHA1指纹

以前在App中集成百度地图时&#xff0c;需要在百度地图的开发者网站上绑定应用的包名和签名&#xff0c;以预防自己的key被别人乱用。 最近公司的一个球机产品也搞了类似的做法&#xff0c;我们要访问它的摄像头功能需要使用厂家提供的aar库&#xff0c;但是你要想正常调用它的…
阅读更多...
如何批量给视频添加logo水印？

如何批量给视频添加logo水印？

如果你想为自己的视频添加图片水印&#xff0c;以增强视频的辨识度和个性化&#xff0c;那么你可以使用固乔剪辑助手软件来实现这一需求。下面就是详细的操作步骤&#xff1a; 1.下载并打开固乔剪辑助手软件&#xff0c;这是一款简单易用的视频剪辑软件&#xff0c;功能丰富&am…
阅读更多...
一起学数据结构(12)——归并排序的实现

一起学数据结构(12)——归并排序的实现

1. 归并排序原理&#xff1a; 归并排序的大概原理如下图所示&#xff1a; 从图中可以看出&#xff0c;归并排序的整体思路就是把已给数组不断分成左右两个区间&#xff0c;当这个区间中的数据数量到达一定数值时&#xff0c;便返回去进行排序&#xff0c;整体的结构类似二叉树…
阅读更多...
在 Mac M1 上运行 Llama 2 并进行训练

在 Mac M1 上运行 Llama 2 并进行训练

在 Mac M1 上运行 Llama 2 并进行训练 Llama 2 是由领先的人工智能研究公司 Meta &#xff08;前Facebook&#xff09;开发并发布的下一代大型语言模型 (LLM)。 它基于 2 万亿个公共数据 token 进行了预训练&#xff0c;旨在帮助开发人员和企业组织构建基于人工智能的生成工具和…
阅读更多...
云音乐Android Cronet接入实践

云音乐Android Cronet接入实践

背景 网易云音乐产品线终端类型广泛&#xff0c;除了移动端&#xff08;IOS/安卓&#xff09;之外&#xff0c;还有PC、MAC、Iot多终端等等。移动端由于上线时间早&#xff0c;用户基数大&#xff0c;沉淀了一些端侧相对比较稳定的网络策略和网络基础能力。然而由于各端在基础…
阅读更多...
如何理解Go言中的Context?

如何理解Go言中的Context?

目前看过除了《go语言程序设计》以外最好的教程&#xff1a;https://www.practical-go-lessons.com 原文&#xff1a;https://www.practical-go-lessons.com/chap-37-context 你将在本章中学到什么&#xff1f; 1.什么是上下文&#xff1f; 2.什么是链表&#xff1f; 3.如何…
阅读更多...
物联网知识复习

物联网知识复习

物联网的内涵和体系结构 物联网的基本内涵 物联网的基本内涵在于物联&#xff0c;物物相连或者物和人相连的互联网。 也就是说&#xff0c;它是要由物主动发起的&#xff0c;物物互联的互联网。 它的第一层意思是说物和物相连&#xff1b;第二层意思是说物和人相连。 物联网的…
阅读更多...
美摄人像背景抠图SDK

美摄人像背景抠图SDK

企业对于图像处理的需求越来越高。无论是社交媒体营销、产品展示还是企业内部培训&#xff0c;高质量的图像都是吸引用户和提升品牌形象的关键。然而&#xff0c;传统的图像处理工具往往需要大量的手动操作和专业技巧&#xff0c;耗时耗力。为了满足企业对于高效、精准的图像处…
阅读更多...
✔ ★【备战实习（面经+项目+算法）】 10.22学习时间表（总计学习时间：4.5h）（算法刷题：7道）

✔ ★【备战实习（面经+项目+算法）】 10.22学习时间表（总计学习时间：4.5h）（算法刷题：7道）

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…
阅读更多...
医院数字档案系统-医院数字档案室建设方案

医院数字档案系统-医院数字档案室建设方案

医院数字档案系统是一种将医院病历、检查报告、检验结果等医学相关数据以数字化形式储存、管理和检索的信息系统。它是利用计算机技术和网络技术对病历、影像、检验、处方等各类医疗信息进行数字化管理&#xff0c;实现电子病历、电子影像、电子处方等数据化服务。 医院数字档案…
阅读更多...
Zabbix“专家坐诊”第208期问答汇总

Zabbix“专家坐诊”第208期问答汇总

问题一 Q&#xff1a;请问大佬们&#xff0c;我的测试机部署了2个版本的zabbix服务端&#xff0c;在启动第二个的时候报这个错&#xff0c;请问这个路径能在配置文件修改吗&#xff1f; SYJKLiLB64dded94d3c0c.png A&#xff1a;报错是你的进程存在&#xff0c;无法启动。一个…
阅读更多...
无缝的链间互操作性：通用消息传递的强大之处

无缝的链间互操作性：通用消息传递的强大之处

前言 通用消息传递&#xff08;General Message Passing&#xff0c;GMP&#xff09;是一种支持区块链之间通信和数据传输的机制。GMP正在成为增强不同区块链网络之间互操作性的解决方案。GMP允许应用程序构建者通过使用安全消息在区块链之间通信和交换信息来利用任何区块链的…
阅读更多...
openEuler 22.03 LTS 安装 Docker CE 和 Dcoker Compose

openEuler 22.03 LTS 安装 Docker CE 和 Dcoker Compose

openEuler 使用 DNF 安装 Docker CE 1024&#xff0c;节日快乐&#xff01;回归正题&#xff0c;DNF 安装 DockerOS 系统环境准备安装 docker-ce 步骤1、更新系统2、安装必要的软件包3、添加 Docker CE 存储库4、更新索引缓存并安装 Docker CE5、启动 Docker 服务6、查看 Docke…
阅读更多...
数字驱动，营销赋能丨工商职院电子商务专业学生，前往餐饮美食电商新业态基地试岗交流

数字驱动，营销赋能丨工商职院电子商务专业学生，前往餐饮美食电商新业态基地试岗交流

纸上得来终觉浅&#xff0c;绝知此事要躬行。为了让学生更好的了解自己与所应聘岗位的匹配度&#xff0c;同时也希望在实际业务场景中&#xff0c;发掘自身优势&#xff0c;10月23日&#xff0c;四川产教融创园信息技术有限公司组织四川工商职业技术学院的电子商务专业学生一行…
阅读更多...
微软成AI热潮大赢家，继续押注大模型和人工智能

微软成AI热潮大赢家，继续押注大模型和人工智能

KlipC报道&#xff1a;微软在官网发布了财报&#xff0c;据数据显示该公司营收同比增长13%达565亿美元&#xff0c;营业利润同比增长25%达269亿美元&#xff0c;净利润同比增长27%达223亿美元。 KlipC的合伙人Andi D表示&#xff1a;“微软的智能云部门收入同比增长19%&#xf…
阅读更多...
新成果展示：AlGaN/GaN基紫外光电晶体管的设计与制备

新成果展示：AlGaN/GaN基紫外光电晶体管的设计与制备

紫外光电探测器被广泛应用于导弹预警、火灾探测、非可见光通信、环境监测等民事和军事领域&#xff0c;这些应用场景的实现需要器件具有高信噪比和高灵敏度。因此&#xff0c;光电探测器需要具备响应度高、响应速度快和暗电流低的特性。近期&#xff0c;天津赛米卡尔科技有限公…
阅读更多...
JAVA电商平台免费搭建 B2B2C商城系统 多用户商城系统 直播带货 新零售商城 o2o商城 电子商务 拼团商城 分销商城

JAVA电商平台免费搭建 B2B2C商城系统 多用户商城系统 直播带货 新零售商城 o2o商城 电子商务 拼团商城 分销商城

涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023