【uni-app】自定义导航栏

news2024/11/24 11:55:26

【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>

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

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

相关文章

前端渲染模式CSR，SSR，SSG，ISR，DPR

前端渲染模式CSR，SSR，SSG，ISR，DPR

目录 一、客户端渲染——CSR&#xff08;Client Side Rendering&#xff09; 二、服务器端渲染——SSR&#xff08;Server Side Rendering&#xff09; 三、静态站点生成——SSG&#xff08;Static Site Generation&#xff09; 四、增量静态生成——ISR&#xff08;Increm…
阅读更多...
ASEMI快恢复二极管MUR2080CT参数， MUR2080CT规格

ASEMI快恢复二极管MUR2080CT参数， MUR2080CT规格

编辑-Z MUR2080CT参数描述&#xff1a; 型号&#xff1a;MUR2080CT 最大峰值反向电压(VRRM)&#xff1a;800V 最大RMS电压(VRMS)&#xff1a;430V 最大直流阻断电压VR(DC)&#xff1a;800V 平均整流正向电流(IF)&#xff1a;20A 非重复峰值浪涌电流(IFSM)&#xff1a;15…
阅读更多...
科技赋能企业，实现数字化转型

科技赋能企业，实现数字化转型

科技是第一生产力&#xff0c;数字技术即科技&#xff0c;可以改变传统的商业模式&#xff0c;为各行各业注入新的活力。 推动企业数字化转型&#xff0c;可是实现行业的效率提升&#xff0c;实现跨界重组&#xff0c;重构产业模式&#xff0c;为产业格局重新赋能&#xff0c;最…
阅读更多...
批发小程序怎么做

批发小程序怎么做

批发订货小程序功能介绍 我们的批发订货小程序是一个集订货浏览权限、一客一价、业务员端口、代客下单、订单汇总和订单打印等功能于一体的专业平台。以下是对这些功能的详细描述&#xff1a; 1. 订货浏览权限&#xff1a;我们的小程序可以为不同用户分配不同的订货浏览权限。…
阅读更多...
山寨版 Threads登苹果下载榜第一，黑客借此分发恶意软件

山寨版 Threads登苹果下载榜第一，黑客借此分发恶意软件

最近&#xff0c;苹果在欧洲下架了一款假冒的Threads应用程序&#xff0c;有意思的是该APP吸引了大量的用户下载&#xff0c;最高峰时曾登录苹果下载榜第一名。 在发现该虚假APP后&#xff0c;苹果已经暂停了其开发者账户&#xff0c;随后更是将SocialKit LTD所有的应用程序全…
阅读更多...
做PPT一定要知道这5个素材模板网站。

做PPT一定要知道这5个素材模板网站。

做PPT绝对不能错过的5个网站、PPT素材、PPT模板、PPT课件、PPT教程等全部都能免费下载&#xff0c;建议收藏&#xff01; 菜鸟图库 https://www.sucai999.com/search/ppt/0_0_0_1.html?vNTYwNDUx 菜鸟图库网有非常丰富的免费素材&#xff0c;像设计类、办公类、自媒体类等素材…
阅读更多...
DBeaver数据库管理工具安装连接PostgreSQL和DM

DBeaver数据库管理工具安装连接PostgreSQL和DM

文章目录 1. 安装2. 连接PostgreSQL3. 连接DM83.1 下载驱动3.2 添加驱动3.3 连接3.4 创建表空间和用户3.5 执行sql 1. 安装 下载地址 https://dbeaver.io/download/ 2. 连接PostgreSQL 配置显示所有数据库 第二个勾选会显示模板数据库 点击测试连接&#xff0c;然后下载驱动…
阅读更多...
Helm 安装prometheus-stack 使用local pv持久化存储数据

Helm 安装prometheus-stack 使用local pv持久化存储数据

目录 背景&#xff1a; 环境准备&#xff1a; 1. 磁盘准备 2. 磁盘分区格式化 local storage部署 1. 节点打标签 2. 创建local pv storageClass和prometheus-pv Prometheus-stack部署 1. 下载helm chart包 2. values.yaml 参数解释 3. 部署prometheus-stack 4. 查看…
阅读更多...
运行软件plotsr时报错：“ImportError: Incomplete genomic information”

运行软件plotsr时报错：“ImportError: Incomplete genomic information”

为了对 syri.out &#xff08;assembly的变异检测结果&#xff09;进行可视化处理&#xff0c;本人选择了plotsr软件对其基因组重排现象进行可视化&#xff1a; (base) [hgzhonghead01 08.assembly_calling]$ plotsr --sr syri.out --genomes ../data/Sc_R64.fasta --genomes …
阅读更多...
什么是搜索引擎？2023 年搜索引擎如何运作？

什么是搜索引擎？2023 年搜索引擎如何运作？

目录 什么是搜索引擎&#xff1f;搜索引擎的原理什么是搜索引擎爬取&#xff1f;什么是搜索引擎索引&#xff1f;什么是搜索引擎检索?什么是搜索引擎排序&#xff1f; 搜索引擎的目的是什么&#xff1f;搜索引擎如何赚钱&#xff1f;搜索引擎如何建立索引?网页抓取文本处理建…
阅读更多...
全网最细，接口自动化测试-数据库操作与日志模块，一篇打通...

全网最细，接口自动化测试-数据库操作与日志模块，一篇打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 进行接口测试时&a…
阅读更多...
Unity Shader - SV_POSITION 和 TEXCOORD[N] 的varying 在 fragment shader 中输出的区别

Unity Shader - SV_POSITION 和 TEXCOORD[N] 的varying 在 fragment shader 中输出的区别

起因 因另一个TA同学问了一个问题 我抱着怀疑的心态&#xff0c;测试了一下 发现 varying 中的 sv_position 和 texcoord 的值再 fragment shader 阶段还真的不一样 而且 sv_position 还不是简单的 clipPos/clipPos.w 的操作 因此我自己做了一个试验&#xff1a; 结果还是不一…
阅读更多...
Ext4文件系统介绍 - 实战篇

Ext4文件系统介绍 - 实战篇

本文主要通过dd&#xff0c;hexdump和dumpe2fs工具分析ext4的磁盘二进制数据&#xff0c;加深对ext4文件系统的印象&#xff0c;要想理解本建议先阅读下Ext4文件系统介绍 - 理论篇_nginux的博客-CSDN博客。 磁盘超级块数据分析 根据理论篇我们知道ext4 layout中前1024字节是x…
阅读更多...
Flask 使用Flask的session来保存用户登录状态例子

Flask 使用Flask的session来保存用户登录状态例子

使用Python的Flask库实现的登录接口、查询金额接口和注销接口的示例。 当用户发送POST请求到/login接口时&#xff0c;代码会获取请求中的用户名和密码。如果用户名和密码匹配&#xff08;在示例中是admin和admin123&#xff09;&#xff0c;则会将用户名保存在session中&…
阅读更多...
Scratch 放置建筑

Scratch 放置建筑

Scratch 放置建筑 本程序的功能是放置和删除建筑。点击鼠标时建筑会复制并从初始位置向鼠标指针移动&#xff0c;每次复制都更换外观&#xff0c;距离鼠标指针较近时停止移动并调至垂直方向&#xff0c;延时0.5秒。延时过后鼠标指针接触到建筑每隔0.1秒进行判断&#xff0c;3次…
阅读更多...
HOT62-N皇后

HOT62-N皇后

leetcode原题链接&#xff1a;N皇后 题目描述 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返…
阅读更多...
灵活用工服务平台是怎样的？

灵活用工服务平台是怎样的？

灵活用工服务平台是为企业提供灵活用工人员招募、管理和支付等服务的平台。这些平台通常会建立一套在线系统&#xff0c;帮助企业发布岗位需求&#xff0c;筛选和招募合适的灵活用工人员&#xff0c;管理他们的工作时间和报酬。 企业选择做灵活用工的原因有这些&#xff1a; 1…
阅读更多...
虚幻插件Landscaping Landscaping Mapbox

虚幻插件Landscaping Landscaping Mapbox

虚幻插件Landscaping & Landscaping Mapbox Landscaping offers an easy way to import GIS data as single Landscape or World Composition (UE4) or World Partition (UE5) or Procedural/Static Mesh. 提供了一种非常简单的方式来导入GIS数据&#xff0c;可以生成Lands…
阅读更多...
力扣C++｜一题多解之数学题专场（1）

力扣C++｜一题多解之数学题专场（1）

目录 7. 整数反转 9. 回文数 12. 整数转罗马数字 13. 罗马数字转整数 29. 两数相除 7. 整数反转 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 -如果反转后整数超过 32 位的有符号整数的范围 [2^31, 2^31 -1] &#xff0c;就返回 0。…
阅读更多...
springboot项目中添加自定义日志

springboot项目中添加自定义日志

文章目录 当前项目使用的springboot为 2.2.2.release。低版本的话logging下的子标签有可能不是这样的。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>2.2.2.RELE…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023