使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用
图例:红框区域,使其标题区与胶囊对齐

一、组件 navigation.vue
<template><view class="nav_name"><view class="nav-title" :style="{'color' : props.color, 'padding-top' : top+'rpx','background' : props.bgColor,'height' : tops+'rpx','line-height' : tops+'rpx'}"><view v-if="props.isReturn===0" class="nav-back" @click="returns()"><image src="@/static/report/back_icon.png" mode=""></image></view><view v-else-if="props.isReturn===1" class="nav-back nav-icon" @click="returns()"><image :src="props.returnIcon" mode=""></image></view><view v-else class="nav-back"></view><view class="nav-name" :style="{'text-align':props.isCenter?'center;':'left;'}">{{props.title_name}}</view></view><view :style="{height: top+tops+'rpx'}"></view></view>
</template><script setup>
import { defineProps,ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
const props = defineProps({title_name:{ // 标题名type:String,required: true},isReturn:{ // 0是返回键 1自定义传的图标 >1是不传任何图标type:Number,required: true},returnIcon:{ // 定义传递的图标地址type:String,required: true},color:{ // 文字颜色type:String,required: true},bgColor :{ // 背景颜色type:String,required: true},isCenter:{ // 文字是否居中type:Boolean,required: true}
})const isLast=ref(false)
const top=ref(0)
const tops=ref(100)
const emit = defineEmits(['iconClick'])onShow(()=>{getLast()getTopWeiXin()
})// 返回的箭头
const returns=()=>{if(props.isReturn===0){if(isLast.value){uni.switchTab({url:'/pages/index/index' //返回首页})}else{uni.navigateBack({delta: 1 //返回上一页});}}else if(props.isReturn===1){// 自定义图标操作emit('iconClick')}
}
// 获取小程序安全区域的高度
const getTopWeiXin=()=>{top.value = parseInt(uni.getSystemInfoSync().safeAreaInsets.top * 750 / uni.getSystemInfoSync().windowWidth) uni.setStorageSync('top', top.value);
}
// 获取有无上一页
const getLast=()=>{let pages = getCurrentPages();//当前页if(pages.length == 1){isLast.value = true}else{isLast.value = false}
}
</script><style lang="scss" scoped>
.nav_name{.nav-title{position: fixed;z-index: 999;width: 750rpx;display: flex;align-items: center;justify-content: center;text-align: center;overflow: hidden;.nav-back{width: 60rpx;position: absolute;left: 0;z-index: 999;margin-left: 20rpx;margin-top: 8rpx;image{width: 36rpx;height: 36rpx;}}.nav-icon{margin-top: 20rpx;image{width: 46rpx !important;height: 46rpx !important;}}.nav-name{width: 560rpx;text-align: center;font-weight: bold;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}}
}
</style>
二、页面调用
<template>
<Navigation :title_name="'6-25考试新增学生测试'":isReturn="0":color="'#000000'":bgColor="'#FFFFFF'":isCenter="false"/>
</template>
<script setup>
import Navigation from '@/components/navigation/index.vue'
</script>
三、pages.json 相关设置
// 如果背景色是白色, 需要设置 pages.json 中顶部文字颜色为黑色,显示手机自带的信息"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "远端小程序","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"
}
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~
相关文章:
使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用
图例:红框区域,使其标题区与胶囊对齐 一、组件 navigation.vue <template><view class"nav_name"><view class"nav-title" :style"{color : props.color, padding-top : toprpx,background : props.bgColor,he…...
ARM Linux 系统稳定性分析入门及渐进 13 -- gdb 反汇编 disassemble 命令详细介绍及举例】
文章目录 1.1 gdb 调试回顾1.1.1 gdb list 命令介绍 1.2 反汇编命令 dis 介绍1.2.1 如何设置 gdb 汇编代码的格式 1.1 gdb 调试回顾 在GNU调试器(GDB)中,有许多命令可以帮助我们调试应用程序。 gdb: 这是一个强大的Unix下的程序调试工具。以…...
python连接Microsoft SQL Server 数据库
python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:22:24 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:29:30 FilePath: \PythonProject02\Microsoft SQL Server 数据库.py Description: 这是默认设置,请设置customMade, 打开koroFi…...
docker可视化工具
安装Portainer 官方安装说明:https://www.portainer.io/installation/ [rootubuntu1804 ~]#docker pull portainer/portainer[rootubuntu1804 ~]#docker volume create portainer_data portainer_data [rootubuntu1804 ~]#docker run -d -p 8000:8000 -p 9000:90…...
MySQL 用户管理操作
目录 一、用户管理概述 二、用户管理 1、创建用户 2、删除用户 三、账户密码管理 1、root用户修改自己的密码 2、ROOT用户修改其他普通用户密码 3、普通用户修改自己的密码 4、ROOT用户密码忘记解决办法 1)Linux系统 2)windows系统 四、用户权…...
【python办公自动化】PysimpleGUI中的popup弹窗中的按钮设置居中
PysimpleGUI中的popup弹窗中的按钮设置居中 背景问题解决背景 默认的popup弹窗中的OK按钮是在最下面偏左侧一些,有时需要将按钮放置居中 问题解决 首先找到pysimplegui源代码文件中popup的部分 然后定位到19388行,源文件内容如下 关于popup弹窗OK按钮的设置,将pad属性…...
postgresql 同步流复制两个相关参数synchronous_commit 和 synchronous_standby_names
一:synchronous_commit 1.synchronous_commit参数含义 这个参数用来设置事务提交返回客户端之前,一个事务是否需要等待 WAL 记录被写入磁盘。合法的值是{local,remote_write,remote_apply,on,off}。默认设置是on。 2.各可选值含义 2.1 local 当事务…...
运算放大器发展史
在内部集成了一个补偿电容 MPS公司OP07推出后,大受欢迎。各家厂商都推出了自己的 这4款都是可以替换的...
LVS+Keepalived 实验
Keepalived 是什么 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以解决静态路由出现的单点故障问题的一款检查工具 在一个LVS服务集群中通常有主服务器(MASTER)和备份服务器(BACKUP)两种角色的服务器…...
FreeSWITCH 1.10.10 简单图形化界面1 - docker/脚本/ISO镜像安装
FreeSWITCH 1.10.10 简单图形化界面1 - docker/脚本/ISO镜像安装 0. 界面预览1. Docker安装1.1 下载docker镜像1.2 启动docker镜像1.3 登录 2. 脚本安装2.1 下载2.2 安装2.3 登录2.4 卸载程序 3. 镜像安装3.1 下载镜像3.2 安装镜像3.3 登录 0. 界面预览 http://myfs.f3322.net…...
内网渗透神器CobaltStrike之权限提升(七)
Uac绕过 常见uac攻击模块 UAC-DLL UAC-DLL攻击模块允许攻击者从低权限的本地管理员账户获得更高的权限。这种攻击利用UAC的漏洞,将ArtifactKit生成的恶意DLL复制到需要特权的位置。 适用于Windows7和Windows8及更高版本的未修补版本 Uac-token-duplication 此攻…...
使用haproxy搭建web架构
haproxy HAProxy是一个免费的负载均衡软件,可以运行于大部分主流的Linux操作系统上。 HAProxy提供了可以在七层和四层两种负载均衡能力,它可以提供高可用性、负载均衡、及基于TCP和HTTP应用的代理。适用于负载大的Web站点,在运行在硬件上可…...
Java基础之IO流File类创建及删除
1.File类概述及构造方法 2.File类创建功能 文件创建成功! 如果文件不存在,就创建文件,并返回true 如果文件存在,就不创建文件,并返回false 如果文件夹不存在,就创建文件夹,并返回true 如果文件…...
高速道路监控:工业路由器助力高速监控远程管理与维护
工业路由器在物联网应用中扮演着重要的角色。物联网的发展使得大量设备和传感器能够互联互通,而工业路由器作为连接这些设备和网络的中间桥梁,承担着数据传输和安全管理的重要责任。 工业路由器能够为高速监控提供网络功能,实现户外无线网络部…...
【校招VIP】前端基础之post和get
考点介绍: get和post 是网络基础,也是每个前端同学绕不过去的小问题,但是在校招面试中很多同学在基础回答中不到位,或者倒在引申问题里,就丢分了。 『前端基础之post和get』相关题目及解析内容可点击文章末尾链接查看…...
如何合理设计API接口?
本规范仅适用于由服务器端发起调用请求、POST提交数据以及GET请求文本数据结果的API,统一采用UTF-8编码规则,采用JSON格式响应。 URL定义 API 服务接口应提供REST风格的HTTP(HTTPS) 接口: {protocol}://{domain}:{port}/{app}/{controller}/{action}?{query} 变量 含义 示…...
Jsp 解决out.print()输出多出空行
一、原因 在 JSP 中,HTML 标签和 JSP 指令之外的内容会被当作文本处理,包括空行、空格和制表符等。当 JSP 引擎解析 JSP 页面时,会将这些文本内容原封不动地输出到响应中。 http响应 二、解决方法 在Jsp页面最前端添加 <% page trimDir…...
SMC状态机 讲解2 从模型到SMC
SMC状态机 讲解2 从模型到SMC 1、实例化有限状态机(FSM)2、简单转换 Simple Transition3、外部环回转换 External Loopback Transition4、内部环回转换 Internal Loopback Transition5、转换动作6、转换Guard7、转换参数8、Entry 和 Exit动作9、Push 转换10、Pop转换…...
MyBatis-Plus的使用
MyBatis-Plus 1、mybatis-plus介绍 官网:https://baomidou.com/ MyBatis-Plus (简称 MP)是一个MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。MyBatis-Plus提供了通用的mapper…...
板卡设计+硬件每日学习十个知识点(44)23.8.24 (检测单元设计,接口部分设计,板卡电源输入设计,电源检测电路)
文章目录 1.检测单元介绍(使用GD32单片机)2.GD32的最小系统板3.GD32的温度监测4.GD32的电压监测和电流监测5.GD32的布线6.接口部分设计7.板卡电源输入设计8.电源检测电路 1.检测单元介绍(使用GD32单片机) 答: 首先要为…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
