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的高度)

在这里插入图片描述

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

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

相关文章

网工内推 | 深信服、中软国际技术支持工程师,最高13k*13薪

01 深信服 &#x1f537;招聘岗位&#xff1a;远程技术支持工程师 &#x1f537;任职要求&#xff1a; 一、专业能力和行业经验&#xff1a; ①具备友商同岗位工作经验1.5年以上&#xff0c;具备良好的分析和判断能力&#xff0c;有独立问题处理思路&#xff0c;具备常见协…

SpringAI调用OpenAI Demo

Spring AI 在maven的setting.xml <mirror> <id>spring-milestones</id> <name>Spring Milestones</name> <mirrorOf>spring-milestones</mirrorOf> <url>https://repo.sprin…

C++ 12 之 指针引用

c12指针引用.cpp #include <iostream>using namespace std;struct students12 {int age; };int main() {students12 stu;students12* p &stu; // 结构体指针students12* &pp p; // 结构体指针起别名pp->age 20;// (*pp).age 22;cout << "…

sqli-labs 靶场 less-7 第七关详解:OUTFILE注入与配置

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 7 SQLI DUMB SERIES-7判断注入点 进入页面中&#xff0c;并输入数据查看结果。 发现空数据提…

【Python】成功解决ModuleNotFoundError: No module named ‘PyQt5‘

【Python】成功解决ModuleNotFoundError: No module named ‘PyQt5’ 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985…

nodejs——原型链污染

一、引用类型皆为对象 原型和原型链都是来源于对象而服务于对象的概念&#xff0c;所以我们要先明确一点&#xff1a; JavaScript中一切引用类型都是对象&#xff0c;对象就是属性的集合。 Array类型、Function类型、Object类型、Date类型、RegExp类型等都是引用类型。 也就…

WPS JSA 宏脚本入门和样例

1入门 WPS window版本才支持JSA宏的功能。 可以自动化的操作文档中的一些内容。 参考文档&#xff1a; WPS API 参考文档&#xff1a;https://open.wps.cn/previous/docs/client/wpsLoad 微软的Word API文档&#xff1a;Microsoft.Office.Interop.Word 命名空间 | Microsoft …

Latex | 数学公式

Latex 最近在学习使用 LaTeX 来敲公式&#xff0c;写材料。说实话&#xff0c;这个工具在写公式方面&#xff0c;确实堪称神器&#xff01;不只是我&#xff0c;连爱因斯坦要是看到它&#xff0c;估计都会点个赞。 在这里&#xff0c;我也得给大家分享一个宝藏网址&#xff1…

SolidWorks官方授权代理商亿达四方带您解读最新SW版本特性

在快速迭代的工业设计领域&#xff0c;每一次软件的更新都预示着生产力的跃升和设计边界的拓展。作为行业领先的3D CAD解决方案&#xff0c;SolidWorks的最新版本再次站在了技术创新的前沿&#xff0c;为企业和设计师们带来了前所未有的设计效率与创意自由度。亿达四方&#xf…

LeakSearch:针对网络公开凭证的安全扫描与检测工具

关于LeakSearch 在红队演戏过程中&#xff0c;往往需要获取到针对目标域的访问权限。在这个过程中&#xff0c;很多红队人员会选择使用暴露在互联网上的代理服务器来实现目标域的访问&#xff0c;那么此时就需要在互联网上收集公开暴露的凭证信息。 对于蓝队来说&#xff0c;…

每日5题Day23 - LeetCode 111 - 115

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;111. 二叉树的最小深度 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeN…

python的%time 、%%time 、%timeit、%%timeit的区别

%time 、%timeit 要在ipython下才可以使用。(所以说Jupyter Notebook当然是可以用的,pycharm里的python环境也是jupyter Notebook的) %time可以测量一行代码执行的时间 %timeit可以测量一行代码多次执行的时间 网上有说法说,%timeit是测量一行代码100000次循环内,3次最快速…

Vulnhub-DC-1,7

靶机IP:192.168.20.141 kaliIP:192.168.20.128 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) 前言 1和7都是Drupal的网站&#xff0c;只写了7&#xff0c;包含1的知识点 信息收集 用nmap扫描端口及版本号 进入主页查看作者给的提示&#xff0c;不是暴力破解的…

PostgreSQL学习笔记

一、安装 官网下载地址&#xff1a;EDB: Open-Source, Enterprise Postgres Database Management 双击安装程序进行安装 选择端口&#xff0c;默认的即可 验证是否安装成功 在开始菜单里找到PGAdmin 4 打开这个大象头&#xff0c;会在浏览器中打开新的标签页。第一次打开会…

【vue-8】记事本案例

小知识点&#xff1a; 列表末尾插入数据&#xff1a; list.push("lihua") 列表删除数据&#xff1a; # index要删除数据的索引值&#xff0c;1为删除数据长度 list.splice(index,1) 完整示例代码&#xff1a; <!DOCTYPE html> <html lang"en&quo…

Vue3+Vite报错:vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?

Vue3Vite报错&#xff1a;vite忽略.vue扩展名 Failed to resolve import … Does the file exist? 先看报错&#xff1a; 分析原因 原因是我们没有写后缀名 建议你在你的vite.config.js中加上如下配置 import { defineConfig } from "vite"; import vue from &qu…

NMF算法

1. NMF算法 NMF算法&#xff0c;即非负矩阵分解&#xff0c;是一种无监督学习算法&#xff0c;主要用于数据降维和特征提取&#xff0c;特别是在数据元素具有非负性约束的情况下。 NMF是一种数据降维模型&#xff0c;它的基本模型是通过矩阵分解将非负数据转换到新的空间&…

【调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录】

调试笔记-系列文章目录 调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 文章目录 调试笔记-系列文章目录调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 前言一、调试环境操作系统&…

MIPI A-PHY协议学习

一、说明 A-PHY是一种高带宽串行传输技术,主要为了减少传输线并实现长距离传输的目的,比较适用于汽车。同时,A-PHY兼容摄像头的CSI协议和显示的DSI协议。其主要特征: 长距离传输,高达15m和4个线内连接器; 高速率,支持2Gbps~16Gbps; 支持多种车载线缆(同轴线、屏蔽差分…

5.2 参照完整性

5.2.1 外键约束 语法格式&#xff1a;constraint < symbol > foreign key ( col_nam1[, col_nam2... ] ) references table_name (col_nam1[, col_nam2...]) [ on delete { restrict | cascade | set null | no action } ] [ on update { restrict | cascade | set nu…