当前位置: 首页 > news >正文

uniapp——自定义导航栏的封装

为什么需要封装自定义导航

  1. 首先如果开发的是微信小程序,那么在安卓环境下导航栏标题是默认靠左对齐的(虽然你在微信开发者工具上看到的依旧是居中展示),而在ios环境则是居中展示的。
  2. 很多时候我们需要对整个项目有一个主题色或者公共的样式配置,封装一个公共的自定义导航栏更易于实现与管理。
  3. 系统导航栏高度根据机型会发生变化,大部分是44px,但是有时候也会是40px等高度,如果你需要针对导航栏和状态栏高度对页面做一些定制需求那会显得比较困难。(网上有一些根据胶囊按钮获取导航栏高度的方法实测后发现并不精准。)

当然原生导航也并不是一无是处的。原生导航的体验更好,渲染新页面时,原生导航栏的渲染无需等待新页面dom加载,可以在新页面进入动画开始时就渲染。原生导航还可以避免滚动条通顶,并方便的控制原生下拉刷新。

封装思路

这里我们借助uniapp官方提供的uni-nav-bar进行封装。(vue3 + ts + setup)

  1. 首先,我们希望可以自动获取每个页面的标题,并不是每次使用自定义组件再去设置,我们置顶page.json里面包含了我们所有的页面的标题,所以我们直接导入该文件,使用currentPage获取当前页面的路由,然后匹配page.json文件里面的page或者subPackages路由,需要注意的是subPackages里面的路由需要自己收到拼装。
    const { title, ...$attrs } = useAttrs()
    const defaultTitle = '我是默认标题'
    // 通过page.json文件里面的pages与subPackages数组自动获取标题栏
    const getCurrentPageTitle = () => {// 有传入的标题直接使用传入的标题if (title) {return title}const { route } = currentPage()const page = pagesjson.pages.find((item) => item.path === route)if (page) {return page.style?.navigationBarTitleText || defaultTitle}for (const subPackage of pagesjson.subPackages) {const subPage = subPackage.pages?.find((item) => route === `${subPackage.root}/${item.path}`)if (subPage) {return subPage.style?.navigationBarTitleText || defaultTitle}}
    }
    
  2. 然后我们使用getCurrentInstance和``createSelectorQuery定义一个方法返回自定义导航栏的高度,便于我们需要的时候使用。
    const pageInstace = getCurrentInstance()
    const emits = defineEmits(['getHeight'])
    onMounted(() => {const query = uni.createSelectorQuery().in(pageInstace?.proxy)query.select('.uniNavBar').boundingClientRect((data: any) => {emits('getHeight', data.height + 'px')}).exec()
    })
    
  3. 最后我们还需使用$attrs对组件的属性方法进行穿透,这在我们对组件进行二次封装的时候应该都是必须要做的操作。

完整代码

<template><uni-nav-barclass="uniNavBar"v-bind="$attrs":border="border":statusBar="statusBar":fixed="fixed":leftIcon="leftIcon":title="getCurrentPageTitle()"@clickLeft="clickLeft"></uni-nav-bar>
</template><script lang="ts" setup>
import { onMounted, getCurrentInstance } from 'vue'
import { useAttrs } from 'vue'
import pagesjson from '@/pages.json'
import { currentPage } from '@/utils/tools'interface Props {border?: booleanstatusBar?: booleanfixed?: booleanleftIcon?: string
}const props = withDefaults(defineProps<Props>(), {border: false,statusBar: true,fixed: true,leftIcon: 'left',
})const { title, ...$attrs } = useAttrs()
const pageInstace = getCurrentInstance()
const emits = defineEmits(['getHeight'])
onMounted(() => {const query = uni.createSelectorQuery().in(pageInstace?.proxy)query.select('.uniNavBar').boundingClientRect((data: any) => {emits('getHeight', data.height + 'px')}).exec()
})const defaultTitle = '我是默认标题'
// 通过page.json文件里面的pages与subPackages数组自动获取标题栏
const getCurrentPageTitle = () => {// 有传入的标题直接使用传入的标题if (title) {return title}const { route } = currentPage()const page = pagesjson.pages.find((item) => item.path === route)if (page) {return page.style?.navigationBarTitleText || defaultTitle}for (const subPackage of pagesjson.subPackages) {const subPage = subPackage.pages?.find((item) => route === `${subPackage.root}/${item.path}`)if (subPage) {return subPage.style?.navigationBarTitleText || defaultTitle}}
}// navbar返回按钮事件
const clickLeft = () => {uni.navigateBack()
}
</script>

相关文章:

uniapp——自定义导航栏的封装

为什么需要封装自定义导航 首先如果开发的是微信小程序&#xff0c;那么在安卓环境下导航栏标题是默认靠左对齐的&#xff08;虽然你在微信开发者工具上看到的依旧是居中展示&#xff09;&#xff0c;而在ios环境则是居中展示的。很多时候我们需要对整个项目有一个主题色或者公…...

Halcon机器视觉和运动控制软件通用框架,24年1月最新版新增UI设计器,插件式开发,开箱即用 仅供学习!

24年1月更新 下载点我 此版本已经添加ui设计器。具体功能如上所示&#xff0c;可以自定义变量&#xff0c;写c#脚本&#xff0c;自定义流程&#xff0c;包含了halcon脚本和封装的算子&#xff0c;可自定义ui&#xff0c;通过插件形式开发很方便拓展自己的功能。 ui设计器...

WebGL简介以及使用

WebGL简介 WebGL&#xff08;Web图形库&#xff09; 是一种在没有使用插件的情况下在网页浏览器中渲染2D图形和3D图形的技术。它基于OpenGL ES&#xff0c;一个在嵌入式系统中广泛使用的图形API。WebGL通过HTML5的 <canvas> 元素直接在网页上实现图形渲染&#xff0c;使…...

导轨式信号隔离变送器比例阀门线性驱动器4-20mA/0-5V/0-10V转0-165mA/0-80mA/0-1A/0-2A/0-4A

主要特性 精度、线性度误差等级&#xff1a; 0.1、0.2、0.5 级4-20mA/0-5V/0-10V 等标准信号输入0~100mA/0~500mA/0~1A/0-5A 等电流信号输出0~1V(max 2A)/0~10V/0-24V(max 5A) 等电压信号输出信号输入/信号输出 3000VDC 隔离辅助电源&#xff1a;12V、15V 或 24V 直流单电源供…...

Windows:win11不同分辨率2块屏幕在扩展模式下小屏上边有黑边

摘要&#xff1a;电脑只有一个核显时&#xff0c;Windows11系统在扩展模式下接入2块不同大小的分辨率的显示器&#xff0c;设置高分辨率显示器为主显示器。这时低分辨显示器系统可以正确设置分辨率&#xff0c;但是在低分率显示器上边出现较宽黑边&#xff0c;通过手工在显示设…...

Jenkins-执行脚本案例-初步认识JenKins的使用

环境搭建 docker pull jenkins/jenkins:2.440 docker run -d -p 10240:8080 -p 10241:50000 -v /env/liyong/data/docker/jenkins_mount:/var/jenkins_home -v /etc/localtime:/etc/localtime --name jenkins jenkins/jenkins:2.440 #在挂载的目录下去修改仓库地址 vim hudson…...

Open CV 图像处理基础:(五)Java 使用 Open CV 的绘图函数

Java 使用 Open CV 的绘图函数 使用 Open CV 在 Java 中对图片使用绘图函数&#xff0c;分别绘制矩形、斜线、圆形、椭圆形以及添加文本 Java 使用 Open CV 的绘图函数 Java 使用 Open CV 的绘图函数函数绘制矩形绘制线绘制圆形绘制椭圆添加文本 代码示例Open CV 专栏导航 函…...

PostgreSQL之SEMI-JOIN半连接

什么是Semi-Join半连接 Semi-Join半连接&#xff0c;当外表在内表中找到匹配的记录之后&#xff0c;Semi-Join会返回外表中的记录。但即使在内表中找到多条匹配的记录&#xff0c;外表也只会返回已经存在于外表中的记录。而对于子查询&#xff0c;外表的每个符合条件的元组都要…...

开发规范及常用工具

一、定义对象规范 entity : 是与数据库一一对应的字段 vo : 返回给前端的视图对象 dto : 前端传过来的参数封装成dto,用于返回给前端的对象&#xff0c;一般用于查询操作。 POJO是DO/DTO/BO/VO的统称&#xff0c;禁止命名成xxxPOJO。 1、entity实体类与数据库中的字段一一对应…...

238.【2023年华为OD机试真题(C卷)】火星文计算(模拟-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-火星文计算二.解题思路三.题解代码Python题解代…...

如何通过openresty 限制国外Ip访问

参考代码 https://gitee.com/xiaoyun461/blocking-external-networks首先 需要的依赖&#xff1a; libmaxminddb https://github.com/maxmind/libmaxminddbmaxmind-geoip https://github.com/Dreamacro/maxmind-geoiplibmaxminddb 需要gcc编译&#xff0c;可用 Dockerfile …...

【Vue2】一个数组按时间分割为【今年】和【往年】俩个数组

一. 需求 后端返回一个数组&#xff0c;前端按时间维度将该数组的分割为【今年】和【往年】俩个数组后端返回的数组格式如下 timeList:[{id:1,billTime:"2024-01-10",createTime:"2024-01-10 00:00:00",status:0},{id:2,billTime:"2022-05-25"…...

解决鸿蒙APP的内存泄漏

解决鸿蒙&#xff08;HarmonyOS&#xff09;应用的内存泄漏问题需要采用一系列的策略和技术。与解决Android内存泄漏类似&#xff0c;以下是一些建议&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…...

云原生专栏大纲

1. 私有云实战之基础环境搭建 2. 云原生实战之kubesphere搭建 3.云原生之kubesphere运维 4. 云原生之kubesphere基础服务搭建 5.云原生安全之kubesphere应用网关配置域名TLS证书 6.云原生之DevOps和CICD 7.云原生之jenkins集成SonarQube 8.云原生存储之Ceph集群 9.云原生存储之…...

robot_framework的robot语法与python脚本之间的语法转换

Robot Framework是一个开源的自动化测试框架&#xff0c;支持关键字驱动和数据驱动的测试方法。它具有简单易学的语法和丰富的库&#xff0c;可以与多种语言进行集成&#xff0c;包括Python。 1. robot 的关键字 Robot Framework 是一个用于自动化测试和自动化任务的开源框架…...

D1675滤波器和缓冲器用于单通道6阶高清视频滤波驱动电路,可提高视频信号性能

D1675单电源工作电压为2.5V到5V&#xff0c;是一款高清视频信号译码、编码的滤波器和缓冲器。与使用分立元件的传统设计相比&#xff0c;D1675更能节省PCB板面积&#xff0c;并降低成本以及提高视频信号性能。D1675集成了一个直流耦合输入缓冲器、一个消除带外噪声的视频编码器…...

Java18:网络编程

一.对象序列化&#xff1a; 1.对象流&#xff1a; ObjectInputStream 和 ObjectOutputStream 2.作用&#xff1a; ObjectOutputSteam&#xff1a;内存中的对象-->存储中的文件&#xff0c;通过网络传输出去 ObjectInputStream:存储中的文件&#xff0c;通过网络传输出去…...

【Python百宝箱】模拟未见之境:精准工具畅游分子动力学风景

分子演绎&#xff1a;模拟工具的综合探索 前言 在当今科学研究中&#xff0c;分子动力学模拟成为解析原子和分子行为的关键工具之一。本文将深入探讨几种领先的分子动力学模拟工具&#xff0c;包括MDTraj、ASE&#xff08;原子模拟环境&#xff09;、OpenMM和CHARMM。这些工具…...

Vue 3面试题

Vue 3面试题 以下是一些常见的Vue 3面试题&#xff1a; Vue 3中的Composition API是什么&#xff1f;它与Options API有什么区别&#xff1f; 答案&#xff1a; Composition API是Vue 3中引入的一种新的组件设计模式&#xff0c;它允许开发者通过函数的形式组织和重用组件的逻…...

M-A352AD10高精度三轴加速度计

一般描述 M-A352是一种三轴数字输出加速度计&#xff0c;具有超低噪声、高稳定性、低功耗等特点&#xff0c;采用了夸特的精细处理技术。. 多功能M-A352具有高精度和耐久性&#xff0c;非常适合广泛的具有挑战性的应用&#xff0c;如SHM、地震观测、工业设备的状态监测和工业…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...