使用 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"
}

     希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

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

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

相关文章

如何基于亚马逊云科技打造高性能的 SQL 向量数据库 MyScale

MyScale 是一款完全托管于亚马逊云科技、支持 SQL 的高效向量数据库。MyScale 的优势在于&#xff0c;它在提供与专用向量数据库相匹敌甚至优于的性能的同时&#xff0c;还支持完整的 SQL 语法。在这篇文章中&#xff0c;我们将阐述 MyScale 是如何借助亚马逊云科技的基础设施&…

搭建Tomcat HTTP服务:在Windows上实现外网远程访问的详细配置与设置教程

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

Qt 阴影边框

阴影边框很常见&#xff0c;诸如360以及其他很多软件都有类似效果&#xff0c;了解CSS3的同学们应该都知道box-shadow&#xff0c;它就是来设定阴影效果的&#xff0c;那么Qt呢&#xff1f;看过一些资料&#xff0c;说是QSS是基于CSS2的&#xff0c;既然如此&#xff0c;box-sh…

SQL注入读写文件

文章目录 条件利用SQL注入漏洞读取hosts文件查看文件读写权限安全选项允许导入导出读取hosts文件 利用SQL注入漏洞写入一句话木马&#xff0c;并用蚁剑连接webshell写入文件 条件 SQL注入有直接SQL注入&#xff0c;也有文件读写时的注入&#xff0c;后者的主要 目的在于获取web…

远程办公中安全远程访问解决方案

什么是安全远程访问 安全的远程访问是一个至关重要的过程&#xff0c;可让您使用互联网从远处完全控制某人的设备。为了确保安全&#xff0c;为受保护的远程访问采取了额外的身份验证和加密措施。 为什么安全远程访问解决方案很重要 当 IT 技术人员从远处帮助人们解决计算机…

JMeter分布式集群---部署多台机器进行性能压力测试

有些时候&#xff0c;我们在进行压力测试的时候&#xff0c;随着模拟用户的增加&#xff0c;电脑的性能&#xff08;CPU,内存&#xff09;占用是非常大的&#xff0c;为了我们得到更加理想的测试结果&#xff0c;我们可以利用jmeter的分布式来缓解机器的负载压力&#xff0c;分…

mysql 、sql server 游标 cursor

游标 声明的位置 游标必须在声明处理程序之前被声明&#xff0c;并且变量和条件还必须在声明游标或处理程序之前被声明 游标的使用步骤 声明游标打开游标使用游标关闭游标 &#xff08;sql server 关闭游标和释放游标&#xff09; sql server 游标 declare my_cursor curs…

adb shell setprop 、开发者选项

App性能调试详解 Android App性能监控工具 更多系统属性参考 一、开启 GPU Render 的profiling bar&#xff1a; Gpu渲染速度 adb shell setprop debug.hwui.profile true adb shell setprop debug.hwui.profile visual_bars adb shell setprop debug.hwui.profile visual…

docker-maven-plugin直接把镜像推到私有仓库

接着上篇 推送到本地docker 我们已经把服务做成镜像推到docker&#xff0c;也可以通过docker login 私有地址&#xff0c;去push。麻烦 直接上代码 1、pom改动 <properties><docker.registry>eco-registry.XXX.com</docker.repostory><docker.registry…

rust actix-web定义中间件(middleware)记录接口耗时(接口耗时中间件和鉴权中间件)

文章目录 Actix-web定义中间件(middleware)记录接口耗时中间件简介中间件添加的两种方式&#xff08;接口耗时中间件&#xff09;使用wrap_fn 闭包实现使用warp struct实现中间件调用顺序actix自带的接口耗时中间件 鉴权中间件 Actix-web定义中间件(middleware)记录接口耗时 …

cortex-A7核IIC实验--STM32MP157AAA

实验目的&#xff1a;采集温湿度传感器值 一&#xff0c;IIC概念 1.同步串行半双工总线&#xff0c;主要用于链接整体电路&#xff0c;硬件结构简单&#xff0c;接口连接方便&#xff0c;成本较低 2.两线制&#xff0c;只有两根双向信号线&#xff0c;数据线SDA,时钟线SCL …

基于AWS的3D模型搜索服务实现

3D模型广泛应用于计算机游戏、电影、工程、零售业、广告等许多领域。市场上有很多制作3D模型的工具&#xff0c;但几乎没有工具可以直观地搜索3D模型数据库以找到类似的3D模型 因为开发好的 3D 模型搜索工具非常具有挑战性。 它需要复杂的计算和 AI/ML 框架来创建模型描述符并提…

【React源码实现】元素渲染的实现原理

前言 本文将结合React的设计思想来实现元素的渲染&#xff0c;即通过JSX语法的方式是如何创建为真实dom渲染到页面上&#xff0c;本文基本不涉及React的源码&#xff0c;但与React的实现思路是一致的&#xff0c;所以非常适合小白学习&#xff0c;建议跟着步骤敲代码&#xff…

Docker consul的容器服务注册与发现

前言一、服务注册与发现二、consul 介绍三、consul 部署3.1 consul服务器3.1.1 建立 Consul 服务3.1.2 查看集群信息3.1.3 通过 http api 获取集群信息 3.2 registrator服务器3.2.1 安装 Gliderlabs/Registrator3.2.2 测试服务发现功能是否正常3.2.3 验证 http 和 nginx 服务是…

CRM系统如何定制?定制哪些功能?

虽然市场上有许多成熟的CRM系统供企业选择&#xff0c;但很多时候&#xff0c;现有的标准化CRM系统无法满足企业的特殊需求。这时就需要进行CRM系统定制。那么&#xff0c;什么时候需要CRM系统定制&#xff0c;CRM系统定制怎么弄&#xff1f;下面我们就说一说。 什么时候需要C…

缓存的设计方式

问题情况&#xff1a; 当有大量的请求到内部系统时&#xff0c;若每一个请求都需要我们操作数据库&#xff0c;例如查询操作&#xff0c;那么对于那种数据基本不怎么变动的数据来说&#xff0c;每一次都去数据库里面查询&#xff0c;是很消耗我们的性能 尤其是对于在海量数据…

【Winform学习笔记(九)】Winform窗体程序延迟函数

Winform窗体程序延迟函数 前言正文1、具体代码2、使用示例 前言 Winform 窗体程序开发时&#xff0c;有时需要程序延迟或休眠几秒&#xff0c;如果直接使用 Thread.Sleep() 方法&#xff0c;会造成程序的假死&#xff0c;UI 界面停止响应&#xff1b; 本文中主要介绍一种方法&…

VB.NET调用VB6封装在OCX控件中的函数

将功能函数封装于OCX之中在VB6平台上可以简单化&#xff0c;在默认模板中直接考贝贴入那些函数即可。在博文【将《VB6编程IEEE浮点算法实践》中的Function封装成OCX】将《VB6编程IEEE浮点算法实践》中的Function封装成OCX_Mongnewer的博客-CSDN博客中对VB6的OCX封装做了具体实践…

keepalived+lvs(DR)(四十六)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、作用 二、调度器配置 三、web节点配置 一、作用 使用keepalived解决lvs的单点故障 高可用集群 二、调度器配置 安装keepalived yum install -y k…

OVRL-V2: A simple state-of-art baseline for IMAGENAV and OBJECTNAV 论文阅读

论文信息 题目&#xff1a;OVRL-V2: A simple state-of-art baseline for IMAGENAV and OBJECTNAV 作者:Karmesh Yadav&#xff0c; Arjun Majumdar&#xff0c; Ram Ramrakhya 来源&#xff1a;arxiv 时间&#xff1a;2023 代码地址&#xff1a; https://github.com/ykarmesh…