uniapp自定义navigationBar

最终效果:

一、关闭默认导航栏

pages.json文件中,对单个页面关闭

"navigationStyle": "custom"

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "控制台","navigationStyle": "custom"}},{"path" : "pages/message/message","style" : {"navigationBarTitleText" : "消息"}}],

二、组件设计

<template><view><!-- 状态栏占位 --><view :style="{paddingTop: statusBarHeight + 'px'}"></view><!-- 导航栏内容 --><view :style="{height: navBarHeight + 'px'}" class="navBarComponent"><view class="navContent"><text class="title">{{titles}}</text><view class="right" :style="{width: count*40 + 'px'}" v-if="count > 0" ><view class="item" v-for="(item, index) in icons" :key="index"><image :src="item.icon" class="imageShow" @click="toPage(item.link)"></image></view></view></view></view></view>
</template><script>export default {name:"navigationBar",data() {return {statusBarHeight: 0,navBarHeight: 0,count: 0,icons: []};},props:{titles: String,links: Array},methods: {toPage(url){uni.navigateTo({url:url})}},created() {// 动态获取手机状态栏高度(电量显示区域),H5没有状态栏,会为0this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];// #ifdef H5this.navBarHeight = 45// #endif// #ifndef H5this.navBarHeight = this.statusBarHeight + 11// #endifif(typeof this.$props.links === 'undefined'){this.count = 0}else{this.count = this.$props.links.lengththis.icons = this.$props.links}}}
</script><style lang="scss">.navBarComponent {display: flex;align-items: center;box-sizing: border-box;.navContent{display: flex;align-items: center;padding-left: 15px;padding-right: 15px;width: 100%;.title{font-size: 24px;flex: 1;}.right{display: flex;width: 120px;height: 100%;align-items: center;justify-content: space-between;.item{background-color: white;width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;.imageShow{width: 60%;height: 60%;}}}}}
</style>

三、使用

<navigationBar :titles="'控制台'" :links="icons"></navigationBar>

图标链接数据:

this.icons = [{icon: '/static/icon/notify.png',link: '/pages/message/message'},{icon: '/static/icon/scan.png',link: '/pages/message/message'}
]

不同框架下的语法会有区别

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

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

相关文章

惊!北京三害、上海四毒、广东五虎,谁才是互联网界的“拼命三郎”?

在互联网江湖中&#xff0c;流传着这样一份神秘的“工作强度排名”&#xff0c;它们以地域为划分&#xff0c;将那些被公认为加班狂魔的互联网大厂归为了“北京三害”、“上海四毒”和“广东五虎”。 这份名单一出&#xff0c;让人不禁哑然失笑&#xff0c;同时也让人深思&…

计算机网络部分基础知识

网络协议的意义 单台主机内部的设备之间需要发送和接收消息&#xff0c;那么和相隔很远的两台主机之间发送消息有什么区别呢&#xff1f;两台主机通过网络发送消息&#xff0c;相当于两个网卡设备之间进行通信&#xff0c;最大的区别在于距离变长了。而距离变长带来的结果就是&…

.NET 处理 WebAPI JSON 返回烦人的null为空

目录 前言 一、分析问题 1、空值的处理 2、默认值的处理 3、示例代码 二、解决问题 1、返回的Json 2、null替换为空 3、解决方案 三、总结 四、最后 前言 项目开发中不管是前台还是后台都会遇到烦人的null&#xff0c;数据库表中字段允许空值&#xff0c;则代码实体…

【Python】Python单元测试

文章目录 01-单元测试基础什么是单元测试常用的文件结构运行单元测试 02. 断言函数03. Test Fixtures什么是Test Fixtures模块级别的Fixtures类级别的Fixtures方法级别的Fixtures 04.Mock 01-单元测试基础 什么是单元测试常用的文件结构编写第一个单元测试运行单元测试 什么是单…

springsecurity的学习(四):实现授权

简介 springsecurity的授权&#xff0c;自定义授权失败的处理&#xff0c;跨域的处理和自定义权限校验方法的介绍 授权 权限系统作用 在后台进行用户权限的判断&#xff0c;判断当前用户是否有相应的权限&#xff0c;必须具有所需的权限才能进行相应的操作&#xff0c;以此…

【运维】JetBrains Gateway (Pycharm) SSH免密连接,改为免密连接

一直要求输入密码&#xff0c;很烦人&#xff1a; 如何免密连接&#xff1f; 1 重新打开gateway&#xff0c;来到这个界面点新建连接&#xff1a; 2 点这里设置&#xff1a; 3 在这一页&#xff0c;你可以改你的所有配置&#xff0c;只要设置为password并且保存密码&…

MySQL第6讲--DQL(数据查询语言)的基本操作之基本和条件查询

文章目录 前言DQL(数据查询语言)基本操作查询操作基本查询示例1&#xff1a;查询表格的name&#xff0c;age&#xff0c;并返回&#xff1b;示例2&#xff1a;查询表格中的所有字段&#xff1b;示例3&#xff1a;查询所有员工的工号并返回&#xff0c;起别名&#xff1b;示例4&…

基于Python的去哪儿网数据采集与分析可视化大屏设计与实现

摘要 本文旨在介绍如何利用Python进行去哪儿网景点数据的采集与分析。通过采集去哪儿网上的景点数据&#xff0c;我们可以获取大量的旅游相关信息&#xff0c;并基于这些数据进行深入分析和洞察&#xff0c;为旅游行业、市场营销策略以及用户个性化推荐等提供支持。 本文将使用…

实现挂机会议

png py文件 import os import pyautogui import time from typing import Callable, Tuple from datetime import datetime import cv2 import schedule#通过图像模板匹配在屏幕上找到指定区域并操作 def imgAutoClick(tempFile: str, whatDo: Callable[[Tuple[int, int, int…

【机器学习】混淆矩阵(Confusion Matrix)

一、混淆矩阵 True Negative (TN)&#xff1a; 真负类&#xff0c;样本的真实类别是负类&#xff0c;并且模型将其识别为负类&#xff0c;cm[0][0]。False Positive (FP)&#xff1a; 假正类&#xff0c;样本的真实类别是负类&#xff0c;但是模型将其识别为正类&#xff0c;cm…

【C语言】常用函数汇总表

目录 1. C语言常用函数汇总表&#xff08;概念功能&#xff09;1.1 输入/输出函数&#xff08;<stdio.h>&#xff09;1.2 字符串操作函数&#xff08;<string.h>&#xff09;1.3 内存管理函数&#xff08;<stdlib.h>&#xff09;1.4 数学函数&#xff08;<…

【原创】java+springboot+mysql学业跟踪指导管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

Unity物理模块 之 ​2D刚体

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​ 1.刚体是什么 在 Unity 中&#xff0c;刚体&#xff08;Rigidbody&#xff09; 是物理引擎中最基本的组件之一&#x…

根据字典值回显,有颜色的

背景 本项目以若依前端vue2版本为例&#xff0c;项目中有根据字典值回显文本的函数selectDictLabel&#xff0c;但是有时候我们需要带颜色的回显&#xff0c;大概这样的 用法 <template v-slotscope><dict-label :options"dangerLevelOptions" :value&qu…

XXL-JOB分布式定时任务框架快速入门

文章目录 前言定时任务分布式任务调度 1、XXL-JOB介绍1.1 XXL-JOB概述1.2 XXL-JOB特性1.3 整体架构 2、XXL-JOB任务中心环境搭建2.1 XXL-JOB源码下载2.2 IDEA导入xxljob工程2.3 初始化数据库2.4 Docker安装任务管理中心 3、XXL-JOB任务注册测试3.1 引入xxl-job核心依赖3.2 配置…

deepin V23前瞻丨deepin V23与飞腾腾锐D3000完成适配,持续丰富deepin操作系统硬件生态

查看原文 近日&#xff0c;自主核心芯片研发飞腾公司宣布与deepin V23完成适配&#xff0c;包含飞腾新一代桌面CPU飞腾腾锐D3000、FT-2000/64、桌面芯片飞腾腾锐D2000等多款产品&#xff0c;为用户带来更智能、安全、稳定的使用体验。 飞腾腾锐D3000集成8个飞腾自主研发的新一…

Golang多版本环境安装并存

1. 准备 请先安装最新版本的Go&#xff0c;详见 https://go.dev/doc/install go version2. 配置镜像加速 go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct3. 安装Go指定版本 Golang官方提供dl工具来实现多版本的Go环境管理&#xff0c;详见项目&#…

小白零基础学数学建模应用系列(二):基于Python的共享单车系统建模与仿真分析

共享单车系统作为一种绿色环保的出行方式&#xff0c;已成为现代城市公共交通的重要组成部分。本文将使用Python编程语言&#xff0c;并结合modsim库&#xff0c;构建并仿真一个共享单车系统的模型&#xff0c;通过这一过程来展示如何进行系统的建模与分析。 文章目录 一、背景…

虚拟化—XenServer安装教程详细(附客户端连接)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…

Unity 编写自己的aar库,接收Android广播(broadcastReceiver)并传递到Unity

编写本文是因为找了很多文章&#xff0c;都比较片段&#xff0c;不容易理解&#xff0c;对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章&#xff0c;希望有所帮助。 Android端 首先还是先来写Android端&#xff0c;我们新建一个Android空项目&#xf…