uniapp使用vue3语法构建自定义导航栏,适配小程序胶囊

具体代码


	<view v-if="isCustom" class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
		<slot name="left">
		</slot>
		<slot name="middle"> </slot>
		<view :style="'width:'+navPaddingRight+'px;'+'height:40px'"></view>
	</view>
	<view v-else class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
		<image v-if="!isInTab" class="nav-content-left" src="../../static/back.png" mode="widthFix"
			@click="handleClickBack" />
		<view class="nav-content-middle">
			<text>{{titleText}}</text>
		</view>
	</view>
	<slot name="bottom" :style="'height:'+bottomComponentHeight +'px;'"></slot>
</view>

使用方法:
使用默认配置:

<navbar titleText="这是标题"></navbar>

使用自定义插槽:

		<navbar :isCustom="true" @init-height="initNavHeight" data-eventsync="true" bottomComponentHeight="45">
			<template v-slot:left>
				<image class="nav-content-left" src="../../static/back.png" mode="widthFix" @click="handleClickBack" />
			</template>
			<template v-slot:middle>
				<view class="search-bar-middle" @click="handlerClickSearch()">
					<image src="../../static/search.png" mode="widthFix" style="width: 24rpx"></image>
					<text class="search-bar-middle-text">搜索内容、体系、文章</text>
				</view>
			</template>
			<template v-slot:bottom>
				<classify-menu-bar :tabArr="tabArr" @on-change-tab="onChangeTab" class="classify-top-container"></classify-menu-bar>
			</template>
		</navbar>

一共有三个插槽:
● left: 左侧
● middle:居中
● bottom:固定底部 (需用传递属性,作为底部buttom的高度)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mysql中使用where 1=1有什么问题吗

昨天偶然看见一篇文章&#xff0c;提到说如果在mysql查询语句中&#xff0c;使用where 11会有性能问题&#xff1f;&#xff1f; 这着实把我吸引了&#xff0c;因为我项目中就有不少同事&#xff0c;包括我自己也有这样写的。为了不给其他人挖坑&#xff0c;赶紧学习一下&…

【Echarts系列】带图片的饼图

【Echarts系列】带图片的饼图 序前提说明示例数据格式代码动态旋转图片 序 为了节省后续开发学习成本&#xff0c;这个系列将记录我工作所用到的一些echarts图表。 前提说明 因为饼图中间需要添加图片&#xff0c;所以比较特殊&#xff0c;对于饼图中间数据的对齐很容易出现…

debain安装不上redis,采用docker安装

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 前言 新服务器&#xff0c;出现各种各样的问题&#xff0c;是完全&#xff01;可以&#xff01;理解的&#xff01;md…比如我的这个&#xff0c;就死活装不上redis。横装竖装用面板等等…

WMS仓储管理系统第三方冷库温湿度管理解决方案

随着现代物流行业的迅猛发展&#xff0c;第三方冷库作为冷链物流体系中的关键环节&#xff0c;其温湿度管理对于保障货物质量、提升物流效率具有至关重要的意义。近年来&#xff0c;WMS仓储管理系统技术的不断革新&#xff0c;为第三方冷库的温湿度管理带来了革命性的变革。本文…

数据分享 I 1970-2021年各区县碳排放总量

基本信息. 数据名称: 1970-2021年各区县碳排放总量 数据格式: Shpexcel 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据

一文搞定自动化测试

为什么需要自动化测试&#xff1f; 一个多人合作&#xff0c;开发周期长的前端项目可能会出现以下问题&#xff1a; 代码风格各不相同代码过度耦合&#xff0c;阅读和维护极其困难新同学上手慢等等 为了解决这些问题&#xff0c;需要通过对核心组件进行自动化测试&#xff0…

S2B2C商城系统如何选择?

近年来&#xff0c;S2B2C商城模式被众多企业所青睐&#xff0c;其场景应用包括装修建材、家居用品、汽车、房产、家电、零售、生活用品等各个领域。那么&#xff0c;对于目前还没涉足电商领域的企业来说&#xff0c;SB2B2C商城系统如何选择呢&#xff1f;我们可以从推出时间、开…

跨式期权组合策略是什么?怎么使用跨式期权?

今天带你了解跨式期权组合策略是什么&#xff1f;怎么使用跨式期权&#xff1f;跨式期权策略&#xff0c;这个看似高深莫测的金融工具&#xff0c;实际上是一种非常灵活且实用的投资策略。它以其独特的风险收益特点&#xff0c;吸引了越来越多的投资者关注。 跨式期权组合策略是…

RedHat9 | 防火墙配置与管理

RedHat9中默认安装Firewalld&#xff0c;也可安装iptables。但是两者不可同时运行。 软件或程序主要作用firewalld、iptables策略限制MAC、IP、PORT、ARPSELinux上下文、布尔值、端口软件权限读写执行权限文件系统rwx、隐藏权限、ACL 1、Netfilter 包过滤防火墙工作在TCP/IP的…

【霸王餐系统】搭建部署,可设置二级分销

前言&#xff1a; 霸王餐项目通常是由外卖平台或商家发起的一种营销策略&#xff0c;旨在通过提供低成本甚至免费的外卖来吸引消费者&#xff0c;从而增加销量、优化评价并扩大市场影响力。这种项目往往能够实现平台、商家、推广者和消费者四方共赢的局面。 一、项目优势 市…

uniapp 展示地图,并获取当前位置信息(精确位置)

使用uniapp 提供的map标签 <map :keymapIndex class"container" :latitude"latitude" :longitude"longitude" ></map> 页面初始化的时候&#xff0c;获取当前的位置信息 created() {let that thisuni.getLocation({type: gcj02…

pepy - Python 包下载量统计工具站

文章目录 一、关于 pepy站点使用显示下载量 二、代码贡献依赖环境配置启动环境 三、架构和模式四、常问问题 一、关于 pepy 官网&#xff1a;https://www.pepy.techgithub : https://github.com/psincraian/pepy 前端&#xff1a;https://github.com/psincraian/pepy-front 站…

Linux文本三剑客 awk 和 grep

awk 前言 AWK是一种优良的文本处理工具。它不仅是 Linux中也是任何环境中现有的功能最强大的数据处理引擎之一。 Linux中最常用的文本处理工具有grep&#xff0c;sed&#xff0c;awk。行内将之称为文本三剑客&#xff0c;就功能量和效率来看&#xff0c;awk是当之无愧的文本三…

智能盒子如何检测进气压力传感器?

进气压力传感器是一种用于测量发动机进气系统中压力的传感器。安装在发动机的进气管路或进气歧管上&#xff0c;用于监测进气压力的变化。进气压力传感器的作用是将测量到的压力信号转换为电信号&#xff0c;以便发动机控制单元(ECU)可以根据压力变化来调整燃油喷射量、点火时机…

git版本控制流程

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

开启数字化校园时代:智慧教育的引领者

在当前数字化时代&#xff0c;智慧教育已经成为引领未来的热门议题。随着科技的不断进步和教育观念的演进&#xff0c;数字化校园正逐渐变为现实。作为教育界的领导者&#xff0c;我们积极践行智慧教育理念&#xff0c;为学生们营造一个更智能、高效的学习环境。 教育是每个国家…

零售业上云为什么首选谷歌云

零售业是国民经济的重要组成部分&#xff0c;在促进经济发展、改善人民生活水平方面发挥着重要作用。零售业也是一个竞争激烈的行业&#xff0c;零售企业需要不断创新经营方式、提高服务质量才能在竞争中立于不败之地。 近年来&#xff0c;中国企业在品牌出海方面&#xff0c;一…

常见电子元件封装

常用电子元件封装 本文摘要 本文主要讲述元件封装&#xff0c;我们想要用元件&#xff0c;当然要考虑到他的形状尺寸了&#xff0c;如果太大与结构冲突用不了&#xff0c;太小功率不满足使用在电路中而无法使用&#xff0c;每种元件也因为不同封装可以承受电压等级&#xff0c;…

实现数字化教育梦想:数字化校园解决方案的奇妙魅力

数字化校园解决方案正在以惊人的速度改变着传统教育的面貌&#xff0c;为教育事业注入了新的生机与活力。在这个数字时代&#xff0c;学校和教育机构面临着前所未有的挑战&#xff0c;而数字化校园解决方案则成为了应对这些挑战的利器。它集成了先进的技术和创新的教育理念&…

时间处理获取交易日(考虑兼容性问题)

在获取交易日时间的处理上&#xff0c;出现了苹果14不兼容的问题&#xff0c;就这个问题记录下。 一、获取交易日的代码 封装了一个js文件&#xff0c;在untils目录下&#xff0c;先看代码&#xff0c;然后我讲下思路。 // 获取节假日数据 import { getCalendarHolidays } …