【uni-app】自定义导航栏

【uni-app】自定义导航栏

新手刚玩uniapp进行微信小程序，甚至多端的开发。原生uniapp的导航栏，并不能满足ui的需求，所以各种查阅资料，导航栏自定义内容 整理如下：

需要修改的文件如下：

在这里插入图片描述

1、pages.json

修改pages.json，启动导航栏自适应，设置"navigationStyle": "custom"

{
	"pages": [
		{
			"path": "pages/v2/AIChat/AIChat",
			"style": {
				"navigationBarTitleText": "AI",
				"navigationStyle": "custom"    
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	}
}

2、system_info.js

新建system_info.js，用于获取当前设备的机型系统信息。

/**
 * 此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
	// console.log(windowHeight,'哈哈哈哈哈');
	
	/****************** 微信小程序头部胶囊信息 ********************/
	// #ifdef MP-WEIXIN
	const 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
 
	// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
	navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
	// #endif
 
 
	// #ifdef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight,
		menuButtonHeight,
		menuButtonWidth,
		menuButtonTop,
		menuButtonRight,
		menuButtonBottom,
		menuButtonLeft,
		navHeight
	}
	// #endif
 
	// #ifndef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight
	}
	// #endif
}
 
export {
	systemInfo
}

3、HeadNav.vue

新建组件HeadNav.vue，这是自定义导航栏。

/*
* 注意：
* 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'
				}
			},
			// 文本区paddingLeft
			textPaddingleft() {
				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, //胶囊定位的左边left
				windowWidth: 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-WEIXIN
			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			// #endif
			
			console.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>

4、AIChat.vue

修改要自定义导航栏的组件

<template>
	<view style="height: 100%;">
		<head-nav :style="navStyle"></head-nav>
		<view class="container" :style="containerStyle">
			<scroll-view :scroll-top="scrollTop" class="chat-container" :scroll-into-view="scrollintoid" scroll-y="true"
				@scroll="handleScroll" @scrolltolower="handleScrollToLower">
			省略中间布局内容
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import HeadNav from '@/pages/v2/components/HeadNav.vue'
	import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'
	export default {
		components: {
			MarkdownViewer,
			HeadNav
		},
		data() {
			return {
				// 省略部分变量
				containerStyle: "",
				navStyle: ""
			};
		},
		onReady() {
			// -------------------------- 经典界面自定义，需要记录-------------------------------------------------------------
			// 设备系统信息
			let systemInfomations_ = uni.getSystemInfoSync()
			// 机型适配比例系数
			let scaleFactor_ = 750 / systemInfomations_.windowWidth
			// 当前机型-屏幕高度
			let windowHeight_ = systemInfomations_.windowHeight * scaleFactor_ //rpx
			
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			/* 通用平台 */
			const statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			const scaleFactor = SystemInfomations.scaleFactor //比例系数
			const windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			const navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			const navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			const customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			const menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			this.containerStyle = ' height:' + (systemInfomations_.windowHeight - statusBarHeight - 10) + 'px;';
			// #endif
			
			console.log("this.viewHight:", this.viewHeight)
			
			/* 通用平台 */
			// #ifndef MP-WEIXIN
			this.containerStyle = 'height:' + (systemInfomations_.windowHeight - 54) + 'px;';
			this.navStyle = 'height:' + 44 + 'px';
			// #endif
			// ---------------------------------------------------------------------------------------
	}
}
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[nlp] GPT

[nlp] GPT

一、联合训练任务 1.1 NTP(Next Token Prediction) gpt预训练的一个目标函数有两个，第一个是基础的下一个词预测任务，选择一个K窗口，将窗口中的K个词的embedding作为条件去预测下一个词。 1.2 TC(Text Classification) 第二个是一个分类任务，一段话给一个标签，然后去预…
阅读更多...
MyBatis 的架构

MyBatis 的架构

MyBatis 的架构 MyBatis 是一个基于 Java 的持久层框架&#xff0c;可以将 SQL 语句和 Java 代码进行分离&#xff0c;通过 XML 或注解的方式配置 SQL 语句并执行&#xff0c;从而实现数据访问的功能。MyBatis 的架构包括以下几个部分&#xff1a; SqlSessionFactory&#xff…
阅读更多...
企业拥抱开源的同时，该如何做好风险防范？- 对话新思科技杨国梁

企业拥抱开源的同时，该如何做好风险防范？- 对话新思科技杨国梁

“软件供应链安全”相关文章合集 杨国梁 新思科技软件质量与安全部门高级安全架构师 当前&#xff0c;开源组件已成为软件应用程序中不可或缺的一部分。然而&#xff0c;随着开源软件数量的快速增长&#xff0c;应用领域的不断扩大&#xff0c;随之而来的安全问题也变得愈发严峻…
阅读更多...
数学建模-典型相关分析

数学建模-典型相关分析

上节回顾 论文&#xff1a;常州大学一等奖淡水养殖… 要进行 pearson 相关系数 画散点图、折线图看是否相关检验正态分布满足上述&#xff0c;利用pearson相关系数 刚开始推导不会没关系&#xff0c;会应用就行&#xff0c;推导过程略&#xff0c;之后学习了后续知识&#xff…
阅读更多...
微服务之服务器缓存

微服务之服务器缓存

Informal Essay By English In the difficult employment situation, we need to set a good goal and then do our own thing 参考书籍&#xff1a;“凤凰架构” 进程缓存&#xff08;Cache&#xff09; 缓存在分布式系统是可选&#xff0c;在使用缓存之前需要确认你的系统…
阅读更多...
基于时域特征和频域特征组合的敏感特征集，再利用SVM或KNN传统分类器进行轴承故障诊断(python编程，代码有详细注释)

基于时域特征和频域特征组合的敏感特征集，再利用SVM或KNN传统分类器进行轴承故障诊断(python编程，代码有详细注释)

1.文件夹介绍&#xff08;使用的是CWRU数据集&#xff09; 0HP-3HP四个文件夹装载不同工况下的内圈故障、外圈故障、滚动体故障和正常轴承数据。 这里以打开0HP文件为例进行展示&#xff0c;creat_data.py是处理原始数据的脚本&#xff0c;负责将原始数据切不重叠割成1024的固…
阅读更多...
CSS 实现 Turbo 官网 3D 网格线背景动画

CSS 实现 Turbo 官网 3D 网格线背景动画

转载请注明出处&#xff0c;点击此处 查看更多精彩内容 查看 Turbo 官网 时发现它的背景动画挺有意思&#xff0c;就自己动手实现了一下。下面对关键点进行解释说明&#xff0c;查看完整代码及预览效果请 点击这里。 简单说明原理&#xff1a;使用 mask-image 遮罩绘制网格&a…
阅读更多...
东莞-戴尔R540服务器故障告警处理方法

东莞-戴尔R540服务器故障告警处理方法

DELL PowerEdge R540服务器故障维修案例&#xff1a;&#xff08;看到文章就是缘分&#xff09; 客户名称&#xff1a;东莞市某街道管理中心 故障机型&#xff1a;DELL R540服务器 故障问题&#xff1a;DELL R540服务器无法开机&#xff0c;前面板亮黄灯&#xff0c;工程师通过…
阅读更多...
五笔衰落，PC和OCR惹得祸？

五笔衰落，PC和OCR惹得祸？

许多人认为五笔输入法的衰落主要因素是败给了拼音输入法&#xff0c;是被拼音输入法给“打残”了&#xff0c;取代了&#xff0c;其实这只是表面原因&#xff0c;笔者认为&#xff0c;其关键因素是PC的衰落和OCR技术的不断改进和发展&#xff0c;理由如下&#xff1a; 1、PC出…
阅读更多...
【SQL应知应会】表分区（三）• MySQL版

【SQL应知应会】表分区（三）• MySQL版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习&#xff0c;有基础也有进阶&#xff0c;有MySQL也有Oracle 分区表 • MySQL版 前言一、分区表1.非分区表2.分区…
阅读更多...
欧姆龙以太网模块如何设置ip连接 Kepware opc步骤

欧姆龙以太网模块如何设置ip连接 Kepware opc步骤

在数字化和自动化的今天&#xff0c;PLC在工业控制领域的作用日益重要。然而&#xff0c;PLC通讯口的有限资源成为了困扰工程师们的问题。为了解决这一问题&#xff0c;捷米特推出了JM-ETH-CP转以太网模块&#xff0c;让即插即用的以太网通讯成为可能&#xff0c;不仅有效利用了…
阅读更多...
Pytorch如何打印与Keras的model.summary()类似的输出

Pytorch如何打印与Keras的model.summary()类似的输出

1 Keras的model.summary() 2 Pytorch实现 2.1 安装torchsummary包 pip install torchsummary2.2 代码 import torch import torch.nn as nn import torch.nn.functional as F from torchsummary import summaryclass Net(nn.Module):def __init__(self):super(Net, self).__…
阅读更多...
linux之Ubuntu系列（四）用户管理 用户和权限 chmod 超级用户root， R、W、X、T、S 软链接和硬链接

linux之Ubuntu系列（四）用户管理 用户和权限 chmod 超级用户root， R、W、X、T、S 软链接和硬链接

r(Read&#xff0c;读取)&#xff1a;对文件而言&#xff0c;具有读取文件内容的权限&#xff1b;对目录来说&#xff0c;具有浏览目 录的权限。 w(Write,写入)&#xff1a;对文件而言&#xff0c;具有新增、修改文件内容的权限&#xff1b;对目录来说&#xff0c;具有删除、移…
阅读更多...
【Mac使用笔记】之 Homebrew

【Mac使用笔记】之 Homebrew

Homebrew更新&#xff1a; brew update && brew upgrade 当出现错误&#xff1a; fatal: couldnt find remote ref refs/heads/master 执行&#xff1a; brew tap --repair Ruby安装&#xff1a; 1、查看当前Homebrew版本&#xff1a; brew --version2、查看当前…
阅读更多...
python appium UI 自动化测试框架讨论

python appium UI 自动化测试框架讨论

目录 前言&#xff1a; 框架共性总结 Auto_Analysis 权限弹窗识别 前言&#xff1a; Python Appium UI自动化测试框架是一种用于测试移动应用程序的工具&#xff0c;它结合了Python编程语言和Appium测试框架的功能。 框架共性总结 1 自动找设备 连接设备 2 自动启 appium …
阅读更多...
高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

查看原文>>>高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用 能源是国民经济发展和人民生活必须的重要物质基础。在过去的200多年里&#xff0c;建立在煤炭、石油、天然气等化石燃料基础上的能源体系极大的推动了人类社会的发展。但是人类在使…
阅读更多...
微信合并转发的图片如何批量保存

微信合并转发的图片如何批量保存

今天遇到一个场景&#xff1a;朋友给转发来了一个合并的聊天记录&#xff0c;里面是几十张图片&#xff0c;希望能打印出来。逐张保存太费手了。下面是批量保存图片的方法&#xff1a; 1、登录PC端微信&#xff1b; 2、将要保存图片的这条合并转发的聊天记录收藏&#xff1b;…
阅读更多...
数据结构--线性表以及其顺序存储结构

数据结构--线性表以及其顺序存储结构

这里写目录标题 线性表的定义和特征定义特征 案例引入稀疏多项式链表实现多项式相加小结 线性表的类型定义&#xff08;抽象数据类型&#xff09;定义格式基本操作小结 线性表的顺序表示和实现实现1顺序存储表示顺序表中元素存储位置的计算 实现2顺序表的优点问题出现结构体表示…
阅读更多...
Django项目开发快速入门

Django项目开发快速入门

Django项目开发快速入门 生成Django项目编写module后台管理系统admin自定义管理页面视图函数使用Django模板 生成Django项目 现在cmd中使用命令安装Django框架 pip install django3.2使用命令生成项目 django-admin startproject DjStore使用命令生成应用 python .\manage.…
阅读更多...
安天逆向教程——常用汇编语句

安天逆向教程——常用汇编语句

一.汇编基础 二.条件分支 反汇编时更多关注这些条件分支。如果看懂这些条件分支&#xff0c;会对程序的大体逻辑有一个整体的了解。 至于程序里面的细节&#xff0c;有时会省略掉。往往关键的跳转理解了甚至进行一点点的改动&#xff0c;就会使得程序发生翻天覆地的变化。 三…
阅读更多...
最新文章

Copyright @ 2022~2023