uniapp自定义导航,全端兼容

我们在用uniapp 开发应用的时候,有的页面需要自定义导航,

1.如果普通的直接使用uni 扩展柜组件的 uni-nav-bar 也基本够用,

2.如果稍微带点自定义的这个值无法支持的,特别在小程序端,胶囊是会压住右边的按钮的

自定义个写 支持插槽

不带插槽的直接使用 自定义值看props里面的
小程序端
在这里插入图片描述
h5 app端
在这里插入图片描述

1.新建组件 目录结构 components/NavBar.vue

NavBar.vue 文件
<template><view> <view class='navbar' :style="{'backgroundColor':bgcolor,'z-index':zindex}"><view :style="{'height':tops+'px'}"></view><view :style="{'height':height+'px','line-height':height+'px'}"><view class='mainbox' :style="{'width':widtH+'px','height':'100%'}"><slot name="lf" :style="{'height':height+'px'}" v-if='isBack'><view class="nav-bar-lf"><uni-icons :type="licon" size="25" :color="titColor" @click="goBack"></uni-icons></view></slot><slot name="lc" :style="{'height':height+'px','color':titColor}"><view class="nav-bar-lc" :style="{'color':titColor}">{{title}}</view></slot><slot name="lr" :style="{'height':height+'px'}" v-if='isRbtn'><view class="nav-bar-lr"><uni-icons :type="ricon" size="25" :color="titColor" @click="handRbtn"></uni-icons></view></slot></view></view></view></view>
</template>
<script>export default {props: {title: {// 标题文字(默认为空)type: String,default: "",},titColor: {// 标题和返回按钮颜色(默认白色)type: String,default: "#999",},//建议使用background  因为使用backgroundColor,会导致不识别渐变颜色bgcolor: {// 背景颜色type: String,default: "#f4f4f4",},zindex: {// 层级type: Number,default: 1,},isBack: {// 是否显示返回按钮type: Boolean,default: true,},isRbtn: {// 是否显示右边按钮type: Boolean,default: false,},// 图标licon: {// 返回按钮图标type: String,default: "left",},ricon: {// 右边按钮图标type: String,default: "search",},},data() {return {height: '',widtH: '',tops: ''}},created() {// #ifdef  MPuni.getSystemInfo({success: (e) => {// 计算安全高度this.tops = e.statusBarHeight;let custom = uni.getMenuButtonBoundingClientRect();// 标题栏高度this.height = custom.height + (custom.top - e.statusBarHeight) * 2;// 计算标题栏减去 胶囊的宽度this.widtH = e.windowWidth - custom.width - 10}})// #endif},methods: {goBack() {uni.navigateBack({delta: 1 // 返回的页面数})},// 搜索handRbtn() {this.$emit("onRight")}}}
</script><style>.navbar {width: 100%;position: fixed;top: 0px;}.mainbox {display: flex;align-items: center;/* #ifdef   H5 || APP */height: 45px !important;line-height: 45px;/* #endif */}.nav-bar-lf {width: 45px;height: 100%;text-align: center;}.nav-bar-lc {flex: 1;height: 100%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.nav-bar-lr {width: 50px;height: 100%;text-align: center;}
</style>

页面中使用

index.vue

<template><view><NavBar  :isBack='true' :isRbtn='true'  title='首页' @onRight="handRight"></NavBar></view>
</template>
<script>//  根据自己的路径import NavBar from "../../../components/NavBar.vue" export default {components: {NavBar},data() {return {}},onLoad() {},methods: {handRight(){console.log("点击右边")}}}
</script><style></style>

带插槽的 ,如果带插槽的 里面样式自己想怎么写怎么写

各端展示如下
在这里插入图片描述
在这里插入图片描述
代码如下 index.vue

<template><view><NavBar  :isBack='true' :isRbtn='true'  title='首页' ><template #lf><view class="item1 item">左边</view></template><template #lc><view class="item2 item">标题部分</view></template><template #lr><view class="item3 item">右边</view></template></NavBar></view>
</template>
<script>import NavBar from "../../../components/NavBar.vue"export default {components: {NavBar},data() {return {}},onLoad() {},methods: {}}
</script><style>
.centermain{flex:1;color:#fff;display: flex;align-items: center;
}
.item{flex: 1;background: pink;
}
.item1{flex: 1;background: pink;
}
.item2{flex: 1;background: greenyellow;
}
.item3{flex: 1;background: salmon;
}
</style>

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

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

相关文章

小白必看web专题!PHP-WebShell免杀(基础版)!!真的很简单!(全网最详细版本)

大家好&#xff0c;我是Dest1ny&#xff01; 最近一直在搞辅导啥的&#xff0c;所以没啥时间搞写&#xff5e; 也谢谢大家一直的点赞&#xff0c;今天特意把之前的web专题再发一个。 废话不多说&#xff0c;我们直接开始&#xff01; CLASS-1 WebShell免杀测试 渊龙Sec团队导…

PyQt5常用功能三

日历 QCalendarWidget 提供了基于⽉份的⽇历插件&#xff0c;⼗分简易⽽且直观 from PyQt5.QtWidgets import (QWidget, QCalendarWidget,QLabel, QApplication, QVBoxLayout) from PyQt5.QtCore import QDate import sysclass Example(QWidget):def __init__(self):super().…

[C#]项目中如何用 GraphQL 代替传统 WebAPI服务

在现代应用程序开发中&#xff0c;传统的 WebAPI 通常使用 RESTful 设计风格&#xff0c;然而近年来 GraphQL 作为一种新的 API 查询语言逐渐获得广泛应用。GraphQL 允许客户端精确地查询所需的数据&#xff0c;减少了过度请求和不足请求的问题。本文将详细讨论在项目中用 Grap…

Linux高阶——0928—Github本地仓库与云端仓库关联

1、安装代理软件 steam 选择Github和系统代理模式&#xff0c;一键加速即可 2、 安装Git 3、访问Github网站&#xff0c;创建新用户 4、Github探索 &#xff08;1&#xff09;Explore探索标签 &#xff08;2&#xff09;工程结构 用户名/仓库名 自述文件&#xff0c;用markdo…

SPI通信——FPGA学习笔记14

一、简介 SPI(Serial Periphera Interface&#xff0c;串行外围设备接口)通讯协议&#xff0c;是 Motorola 公司提出的一种同步串行接口技术&#xff0c;是一种高速、全双工、同步通信总线&#xff0c;在芯片中只占用四根管脚用来控制及数据传输&#xff0c;广泛用于 EEPROM、F…

多层感知机(MLP)实现考勤预测二分类任务(sklearn)

1、基础应用&#xff1a; https://blog.csdn.net/qq_36158230/article/details/118670801 多层感知机(MLP)实现考勤预测二分类任务(sklearn) 2、分类器参数&#xff1a;https://scikit-learn.org/dev/modules/generated/sklearn.neural_network.MLPClassifier.html 3、损失函数…

Redis配置篇 - 指定Redis配置的三种方式,以及Redis配置文件介绍

文章目录 1 指定Redis配置的三种方式1.1 通过命令行参数来指定Redis配置1.2 通过配置文件来指定Redis配置1.3 在服务器运行时更​​改 Redis 配置 2 关于Redis配置文件 1 指定Redis配置的三种方式 1.1 通过命令行参数来指定Redis配置 在redis启动时&#xff0c;可以直接通过命…

绿野仙踪不仅是童话,还是便宜又好用的产品测试法!

以 ChatGPT 为代表的大语言模型爆火后&#xff0c;推动了对话类人工智能产品的高速发展&#xff0c;我们已经看到了如智能助理、问答系统、自动写作等多种类型的个性化对话类 AI 服务。 AI 能力的提升让人们对智能 AI 产品的期望越来越高&#xff0c;相关产品的用户体验也因此变…

【音频可视化】通过canvas绘制音频波形图

前言 这两天写项目刚好遇到Ai对话相关的需求&#xff0c;需要录音功能&#xff0c;绘制录制波形图&#xff0c;写了一个函数用canvas实现可视化&#xff0c;保留分享一下&#xff0c;有需要的直接粘贴即可&#xff0c;使用时传入一个1024长的&#xff0c;0-255大小的Uint8Arra…

豆包MarsCode 合伙人计划限时招募中,推广最高赢万元现金!

豆包MarsCode 合伙人计划正式上线啦&#xff01;作为官方推出的推广激励项目&#xff0c;豆包MarsCode 编程助手号召和鼓励所有用户向我们推荐新用户。 现在正式开启首轮合伙人招募&#xff0c;诚邀各位有意愿推广普及 AI 编程产品的伙伴成为我们的合伙人&#xff0c;全国限量…

jmeter输出性能测试报告(常见问题处理与处理)

问题1&#xff1a;报错 WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows R 意思是&#xff1a;报没有权限 处理&#xff1a; 操作非gui生成测试报告的方法 cmd界面进入到 jmeter的bin目录 jmeter –n –t -l -e –o …

对后端返回的日期属性进行格式化(扩展 Spring MVC 的消息转换器)

格式化之前 格式化之后&#xff1a; 解决方式 方式一 在属性中加上注解&#xff0c;对日期进行格式化 JsonFormat(pattern "yyyy-MM-dd HH:mm:ss")private LocalDateTime createTime;//JsonFormat(pattern &quo…

“校友会综合服务平台:连接校友与母校的桥梁”

在当今信息化时代&#xff0c;校友会作为校友与母校之间的重要桥梁&#xff0c;其功能与服务不断拓展和深化。为了更好地满足校友的需求&#xff0c;构建一个高效、便捷的校友服务体系&#xff0c;我们开发了一款基于FastAdmin ThinkPHP Uniapp技术架构的校友会综合服务平台。…

什么是汽车中的SDK?

无论是在家里使用预制菜包做一顿大厨级别的晚餐&#xff0c;还是使用IKEA套组装配出时尚的北欧风桌子&#xff0c;我们都熟悉这样一种概念&#xff1a;比起完全从零开始&#xff0c;使用工具包可以帮助我们更快、更高效地完成一件事。 在速度至关重要的商业软件领域&#xff0…

Linux中各种查看

查看命令 ls ls &#xff1a;简单列出当前目录下的文件和子目录。 ls 目录路径 &#xff1a;列出指定目录下的内容。 ls -l &#xff1a;以长格式显示详细信息&#xff0c;包括文件权限、所有者、大小、修改时间等。 ls -a &#xff1a;显示包括隐藏文件&#xff08;以 . 开…

利用FnOS搭建虚拟云桌面,并搭建前端开发环境(一)

利用FnOS搭建虚拟云桌面&#xff0c;并搭建前端开发环境 一 飞牛FnOS官方文档一、安装FnOS【Win11系统】1.下载VirtualBox2.下载FnOS镜像3.创建虚拟机4.启动完成后&#xff0c;会进入这样一个界面&#xff0c;这个基本上后续就后台了 本人在网上冲浪了很久&#xff0c;一直也没…

DGX的优势

NVIDIA DGX 的 AI 领导力 文章目录 前言一、概述推动跨行业的 AI 创新二、优势客户体验到哪些好处?1. 利用生成式 AI 释放研究人员的潜力2. 加快现代应用程序的上市时间3. 利用 AI 改善客户体验三、性能性能很重要1. 为世界上最先进的超级计算机提供动力2. 打破世界纪录3. 提高…

Apache Flink 和 Apache Kafka

Apache Flink 和 Apache Kafka 都是大数据生态系统中非常重要的工具&#xff0c;但它们的作用和应用场景有所不同。下面将分别介绍两者的主要特性和它们之间的异同点。 Apache Kafka 作用&#xff1a; 消息队列&#xff1a;Kafka 主要作为消息队列使用&#xff0c;用于解耦生…

ES6总结

1.let和const以及与var区别 1.1 作用域 var&#xff1a; 变量提升&#xff08;Hoisting&#xff09;&#xff1a;var 声明的变量会被提升到其作用域的顶部&#xff0c;但赋值不会提升。这意味着你可以在声明之前引用该变量&#xff08;但会得到 undefined&#xff09;。 con…

CSS元素显示类型

display 属性是 CSS 中最重要的属性之一&#xff0c;主要用来控制元素的布局&#xff0c;通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同&#xff0c;每个元素都有一个默认的 display 属性值&#xff0c;例如<div>默认的 display 属性值为 …