uniapp自定义导航栏左中右内容和图标,以及点击事件

uniapp自定义导航栏左中右内容和图标,以及点击事件

效果:
在这里插入图片描述

页面:

		<view class="navigation-bar"><view class="navigation-bar-left" @click="navigateBack"><u-icon name="arrow-left" size="20"></u-icon></view><view class="navigation-bar-title"><view class="navBarTitle"><view>{{userName}}</view><u-icon name="edit-pen" size="20"></u-icon></view></view><view class="navigation-bar-right"><u-icon name="list-dot" size="24" @click="openSettings"></u-icon></view></view>

方法:

methods:{
navigateBack() {
// 处理返回逻辑,可以是uni.navigateBack或uni.switchTab等uni.navigateBack();},
openSettings() {
// 处理设置图标点击事件uni.navigateTo({
url: '/pagesA/registration/useLoginList/useLoginList'})},
editUser() {uni.showToast({title: '点击了设置',icon: 'none'});}
}

样式:

	.navigation-bar {display: flex;align-items: center;padding: 10px;background-color: #fff;position: fixed;top: 0;width: 100%;z-index: 100;}.navigation-bar-left,.navigation-bar-right {width: 50rpx;display: flex;align-items: center;margin-right: 20px;}.navigation-bar-title {flex: 1;text-align: center;font-size: 18px;}.navBarTitle {display: flex;align-items: center;justify-content: center;}

page.json中配置不显示默认导航栏

{"path": "registration/useLoginList/useLoginList","style": {"navigationBarTitleText": "使用登记清单","enablePullDownRefresh": false}}

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

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

相关文章

【嵌入式开发 Linux 常用命令系列 4.3 -- git add 时单独排除某个目录或者文件】

文章目录 git add 时单独排除某个目录或者文件使用 .gitignore 文件使用命令行排除文件或目录 git add 时单独排除某个目录或者文件 在使用 git add 命令时&#xff0c;如果你想要排除特定的目录或文件&#xff0c;可以使用 .gitignore 文件或使用路径规范来指定不想添加的文件…

新的变速箱滚动轴承和齿轮故障数据

变速箱是传动系统中非常关键的一部分&#xff0c;它由齿轮、传动轴、轴承和壳体等组成。变速箱的主要功用包括&#xff1a;&#xff08;1&#xff09;能够改变传动比&#xff0c;按实际情况调整驱动轮转矩和转速&#xff0c;进而满足复杂的行车要求&#xff1b;&#xff08;2&a…

机器学习金融应用技术指南

1 范围 本文件提供了金融业开展机器学习应用涉及的体系框架、计算资源、数据资源、机器学习引擎、机 器学习服务、安全管理、内控管理等方面的建议。 本文件适用于开展机器学习金融应用的金融机构、技术服务商、第三方安全评估机构等。 2 规范性引用文件 下列文件中的内容通过…

新型储能是什么,储能系统解决方案现状及趋势详细说明

新型储能是指新兴的能够存储电能并在需要时释放的储能技术。其中主要包括光伏储能和商业储能。 光伏储能是指通过光伏电池将太阳能转化为电能&#xff0c;并将其存储起来以供后续使用。光伏储能系统一般由太阳能电池板、储能装置和逆变器组成。光伏储能可以将白天产生的电能存…

Java练习题目3:输入一个学生的5门课成绩及对应的学分,计算该同学的加权平均分(WeightedAverageScore3)

每日小语 我们没有意识到惯用语言的结构有多大的力量。可以说&#xff0c;它通过语义反应机制奴役我们。 ——阿尔弗雷德科日布斯基 思考 输入5门课成绩&#xff0c;学分&#xff0c;加权平均分公式 [&#xff08;课程A成绩*课程A学分&#xff09;&#xff08;课程成绩B*课程…

Learn OpenGL 19 几何着色器

几何着色器 在顶点和片段着色器之间有一个可选的几何着色器(Geometry Shader)&#xff0c;几何着色器的输入是一个图元&#xff08;如点或三角形&#xff09;的一组顶点。几何着色器可以在顶点发送到下一着色器阶段之前对它们随意变换。然而&#xff0c;几何着色器最有趣的地方…

动态路由协议——OSPF

目录 一.OSPF来源 二.OSPF术语 1.area id——区域的划分 2.cost——路径开销值 3.route id 4.LSDB表 5.邻居表 6.OSPF路由表 三.OSPF工作过程 1.交互hello报文建立邻居关系 2.选举主从 3.交互LSDB摘要信息 4.LSR,LSU,LSACK同步LSDB表项 5.各自计算路由 四.OSPF交…

maven手动上传的第三方包 打包项目报错 Could not find xxx in central 解决办法

背景: 在Maven私服手动上传了第三方的jar包, 只有jar包, 没有pom文件, 项目在ide中可以正常编译启动,但打包报错无法找到jar包 解决办法: 上传jar包的时候, 点击生成pom. 则打包的时候不会报错

pyrealsense2获取保存点云

一、第一种实现代码 Python import sys import cv2 import pyrealsense2 as rs import numpy as np import keyboard import open3d as o3d import osif __name__ "__main__":output_folder output_data/os.makedirs(output_folder, exist_okTrue)pipeline rs.p…

三级数据库技术知识点(详解!!!)

1、从功能角度数据库应用系统可以划分为表示层、业务逻辑层、数据访问层、数据持久层四个层次&#xff0c;其中负责向表示层直接传送数据的是业务逻辑层。 【解析】表示层负责所有与用户交互的功能;业务逻辑层负责根据业务逻辑需要将表示层获取的数据进行组织后&#xff0c;传…

阅读MySQL知识4

一、MySQL数据库主从同步延迟产生的原因 MySQL的主从复制都是单线程的操作&#xff0c;主库对所有DDL和DML产生的日志写进binlog&#xff0c;由于binlog是顺序写&#xff0c;所以效率很高。 Slave的SQL Thread线程将主库的DDL和DML操作事件在slave中重放。DML和DDL的IO操作…

SpringBoot如何替换启动图标

SpringBoot项目在启动时会出现一个默认的启动图案 . ____ _ __ _ _/\\ / ____ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | _ | _| | _ \/ _ | \ \ \ \\\/ ___)| |_)| | | | | || (_| | ) ) ) ) |____| .__|_| |_|_| |_\__, | / / / /|_||___//_/_/_/::…

软件架构和基于架构的软件开发方法知识总结

一、软件架构定义 软件架构为软件系统提供了一个结构、行为和属性的高级抽象 软件架构是一种表达&#xff0c;使软件工程师能够&#xff1a; &#xff08;1&#xff09;分析设计在满足所规定的需求方面的有效性 &#xff08;2&#xff09;在设计变更相对容易的阶段&#xff0c;…

题目:异或森林(蓝桥OJ 3400)

问题描述&#xff1a; 解题思路&#xff1a; 一个数也可以看作是一段区间&#xff0c;当该区间的异或和为完全平方数时则符合题意。 我们需要注意枚举的完全平方的上限。 异或前缀和减小时间复杂度。 题解&#xff1a; #include <bits/stdc.h> using namespace std; usi…

vi\vim编辑器详解

vi\vim编辑器介绍 vi\vim是visual interface的简称, 是Linux中最经典的文本编辑器 同图形化界面中的 文本编辑器一样&#xff0c;vi是命令行下对文本文件进行编辑的绝佳选择。 vim 是 vi 的加强版本&#xff0c;兼容 vi 的所有指令&#xff0c;不仅能编辑文本&#xff0c;而…

鸿蒙一次开发,多端部署(九)应用市场首页

本小节将以应用市场首页为例&#xff0c;介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 页面设计 一个典型的应用市场首页的UX设计如下所示。 观察应用市场首页的页面设计&#xff0c;不同断点下的页面设计有较多相似的地方。 据此&#xff0c;我们可以将页…

python的BBS论坛系统flask-django-nodejs-php

为了更好地发挥本系统的技术优势&#xff0c;根据BBS论坛系统的需求&#xff0c;本文尝试以B/S架构设计模式中的django/flask框架&#xff0c;python语言为基础&#xff0c;通过必要的编码处理、BBS论坛系统整体框架、功能服务多样化和有效性的高级经验和技术实现方法&#xff…

WebClient上载文件——实现将本地文件同步到远端服务器上

问题描述 用户上传产品示例图片到服务器端上&#xff0c;客户端在请求图片资源时&#xff0c;当服务端架设了多个节点的情况下&#xff0c;由于没有负载均衡请求到保存图片资源的服务器&#xff0c;出现图片访问404的问题。 这里保存上传文件时&#xff0c;同时需要将该文件保…

数学建模(层次分析法 python代码 案例)

目录 介绍&#xff1a; 模板&#xff1a; 例题&#xff1a;从景色、花费、饮食&#xff0c;男女比例四个方面去选取目的地 准则重要性矩阵&#xff1a; 每个准则的方案矩阵&#xff1a;​ 一致性检验&#xff1a; 特征值法求权值&#xff1a; 完整代码&#xff1a; 运行结…

1.6 学Python能干什么,Python的应用领域有哪些

Python能干什么&#xff0c;Python的应用领域 Python 作为一种功能强大的编程语言&#xff0c;因其简单易学而受到很多开发者的青睐。那么&#xff0c;Python 的应用领域有哪些呢&#xff1f; Python 有着非广泛的应用&#xff0c;几乎所有大中型互联网公司都在使用 Python&a…