微信小程序(十五)自定义导航栏
注释很详细,直接上代码
上一篇
新增内容:
1.组件文件夹创建方法
2.自定义组件的配置方法
3.外部修改组件样式(关闭样式隔离或传参)
创建组件文件夹
如果是手动创建建议注意在
json文件声明:
mynav.json
{//声明为组件可将这一组文件设为自定义组件"component": true
}

这里完善一下组件的结构:
myNav.wxml
//后面那个样式是留着后面演示传参导入样式的
<view class="navigationBar custom-class"><view class="navigationBarTitle title-class">自定义标题</view>
</view>
myNav.wxss
.navigationBar{background-color: cornflowerblue;height: 80rpx;/* 预留顶部位置当刘海 */padding-top:80rpx ;display: flex;justify-content: center;
}.navigationBarTitle{font-weight: bold;
}
温馨提醒:不要在组件内使用
标签选择器,因为不受样式隔离影响,会影响全局样式,ID选择器和属性选择器同理
自定义组件的配置方法
这里演示在页面的配置方法,全局使用的话方法相同
index.json
{//注册组件"usingComponents": {//key为名字,value为组件路径"myNav":"/components/myNav/myNav"},//修改成自定义模式(不修改无法生效)"navigationStyle": "custom"
}
使用方法
index.wxml
//没错就是这么简洁
<myNav></myNav>
效果演示:

外部修改组件样式的方法
一.通过关闭组件样式隔离实现
myNav.js
Component({options:{//设置样式共享(组件有默认的样式隔离,这里就是关掉样式隔离)addGlobalClass:true}
})
index.wxss
.navigationBar{//因为外部样式权值比内部低,会被覆盖,!important用于提高权值background-color: crimson !important;
}
效果演示

二.通过传参导入样式
先在组件的js文件声明需要外部传参的类
myNav.js
Component({externalClasses:["custom-class"],
})
使用操作:
index.wxss
//定义一个类并写入所需样式
//老规矩:外部传入记得用!important提高权值
.color-pink{background-color: pink !important;
}
index.wxml
//custom-class是之前声明过的
//将类的样式当作参数传递到组件里面
<myNav custom-class="color-pink"></myNav>
效果演示

源码:
mynav.json
{//声明为组件可将这一组文件设为自定义组件"component": true
}
myNav.wxml
//后面那个样式是留着后面演示传参导入样式的
<view class="navigationBar custom-class"><view class="navigationBarTitle title-class">自定义标题</view>
</view>
myNav.wxss
.navigationBar{background-color: cornflowerblue;height: 80rpx;/* 预留顶部位置当刘海 */padding-top:80rpx ;display: flex;justify-content: center;
}.navigationBarTitle{font-weight: bold;
}
myNav.js
Component({options:{//去除样式隔离addGlobalClass:true},//声明需要外部传参的类externalClasses:["custom-class"]
})
index.wxml
//custom-class="color-pink"是传参步骤
<myNav custom-class="color-pink"></myNav>
index.wxss
//因为外部样式权值比内部低,会被覆盖,!important用于提高权值
.navigationBar{background-color: crimson !important;
}//定义一个类并写入所需样式
//老规矩:外部传入记得用!important提高权值
.color-pink{background-color: pink !important;
}
下一篇
相关文章:
微信小程序(十五)自定义导航栏
注释很详细,直接上代码 上一篇 新增内容: 1.组件文件夹创建方法 2.自定义组件的配置方法 3.外部修改组件样式(关闭样式隔离或传参) 创建组件文件夹 如果是手动创建建议注意在json文件声明: mynav.json {//声明为组件可…...
Python3进行pdf文件分割及转word
今天有个pdf分割的需求,电脑装的Python3,网上查资料都是Python2的代码,所以整理一份3的 安装: pip install PyPDF2 import PyPDF2def funSplitPdf():pdf_file open(/path/fileName.pdf, rb)pdf_reader PyPDF2.PdfReader(pdf_fi…...
深入理解TCP网络协议(1)
目录 1.TCP协议的段格式 2.TCP原理 2.1确认应答 2.2超时重传 3.三次握手(重点) 4.四次挥手 1.TCP协议的段格式 我们先来观察一下TCP协议的段格式图解: 源/目的端口号:标识数据从哪个进程来,到哪个进程去 32位序号/32位确认号:TCP会话的每一端都包含一个32位(…...
QT 中如何使用 JSON 功能?
在 Qt 中,您可以使用 QJsonDocument、QJsonObject 和 QJsonArray 类来处理 JSON 数据。以下是一个简单的示例,说明如何在 Qt 中使用这些类来解析和生成 JSON 数据: 1. 包含必要的头文件 首先,确保您的项目中包含了必要的 Qt JSO…...
C++面试:算法的执行效率和资源消耗、时间和空间复杂度分析根据实际场景,选用合适的数据结构和算法进行程序设计
目录 算法的执行效率和资源消耗、时间和空间复杂度分析 执行效率和资源消耗 时间复杂度分析 空间复杂度分析 实际应用 面试技巧 根据实际场景,选用合适的数据结构和算法进行程序设计 所根据原则 实例 如何选择数据结构示例 合适的数据结构:哈…...
力扣100215-按键变更的次数
按键变更的次数 题目链接 解题思路 我们发现只要相邻的两个字母不一样(大小写算一样),那么按键变更次数就要加1 class Solution { public:int countKeyChanges(string s) {int ans 0;for(int i 1;i<s.size();i){if(s[i] - s[i-1] 32 || s[i] - s[i-1] -32 |…...
STM32-GPIO输出(HAL库)
STM32-GPIO 介绍 什么是GPIO? GPIO(通用输入/输出)是一种用于与外部设备进行数字通信的通用硬件接口。它允许微控制器或其他数字电路的引脚以灵活的方式配置为输入或输出,并在运行时进行动态控制。GPIO可用于连接和控制各种外围…...
倒计时80天
1.J-兔子不会种树_浙江机电职业技术学院第八届新生亮相赛(同步赛) (nowcoder.com) /****** __----~~~~~~~~~~~------___* . . ~~//...... __--~ ~~…...
PBM模型参数详解
本专栏着重讲解PBM学习所得,学习笔记、心得,并附有视频素材资料,视频详细目录如下: PBM相关参数解释1PBM相关参数解释2PBM相关案例实践1PBM相关案例实践2PBM相关案例实践2PBM相关案例实践3PBM多相流中次相界面设置1PBM多相流中次…...
贪吃蛇/链表实现(C/C++)
本篇使用C语言实现贪吃蛇小游戏,我们将其分为了三个大部分,第一个部分游戏开始GameStart,游戏运行GameRun,以及游戏结束GameRun。对于整体游戏主要思想是基于链表实现,但若仅仅只有C语言的知识还不够,我们还…...
Qlik Sense : IntervalMatch(离散匹配)
什么是IntervalMatch IntervalMatch 前缀用于创建表格以便将离散数值与一个或多个数值间隔进行匹配,并且任选匹配一个或多个额外关键值。 语法: IntervalMatch (matchfield)(loadstatement | selectstatement ) IntervalMatch (matchfield,keyfield…...
MySql45讲-08.事务到底是隔离的还是不隔离的?(结合MVCC视频)
命令的启动时机 begin/start transaction 命令并不是一个事务的起点,在执行到它们之后的第一个操作InnoDB表的语句,事务才真正启动。如果你想要马上启动一个事务,可以使用start transaction with consistent snapshot 这个命令。 事务的版本…...
备战蓝桥杯----数据结构及STL应用(基础2)
上次我们讲了vector的大致内容,接下来让我们讲一下栈,队列吧! 什么是栈呢? 很简单,我们用的羽毛球桶就是,我们取的球,是最后放的,栈是一种先进后出的数据结构。 方法函数 s.push(…...
日常学习之:vue + django + docker + heroku 对后端项目 / 前后端整体项目进行部署
文章目录 使用 docker 在 heroku 上单独部署 vue 前端使用 docker 在 heroku 上单独部署 django 后端创建 heroku 项目构建 Dockerfile设置 settings.pydatabase静态文件管理安全设置applicaiton & 中间件配置 设置 requirements.txtheroku container 部署应用 前后端分别部…...
LangGraph:一个基于LangChain构建的AI库,用于创建具有状态、多参与者的应用程序
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
04-Nacos-服务注册基于spring boot实现
官方参考 在不依赖spring cloud 组件基础上,单独的微服务项目,实现nacos接入 1、依赖文件pom.xml <dependency><groupId>com.alibaba.boot</groupId><artifactId>nacos-discovery-spring-boot-starter</artifactId><…...
iOS 闭包和Block的区别
iOS 闭包和Block的区别 原文地址: mob64ca12eb7baf 引言 在iOS开发中,闭包和Block是两个常用的概念。它们都是将一段代码作为变量传递和使用的方式。尽管它们在实现上有一些相似之处,但它们之间还是存在一些重要的区别。本文将会详细介绍闭包和Block的…...
后端学习笔记——后端细碎知识点(每天更新......)
细碎知识点 主要是go后端,也会设计到python、java的知识,懒得分类整理,所以都写在一篇文章里面了,方便自己查看笔记。 context.BindJSON获取POST请求中的json数据gin.H封装了生成json的方式 common.ReturnJSONSuccess(c, gin.H{&…...
二进制中1的个数
作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 学习必须往深处挖&…...
python+matlab text(按图的相对位置显示)
python 用 python 画图时,如果想采用归一化的坐标来指定文本框的位置,则需要用到 transform ax.transAxes 参数,如 ax plt.gca() plt.text(0.1,0.2, "text", fontsize 20, transform ax.transAxes)matlab 方法1 text(___,Name…...
Ollama平台部署GLM-4.7-Flash:从零开始搭建本地大模型服务
Ollama平台部署GLM-4.7-Flash:从零开始搭建本地大模型服务 1. 为什么选择GLM-4.7-Flash? 在众多开源大模型中,GLM-4.7-Flash以其独特的定位脱颖而出。这个30B参数的MoE(混合专家)模型,在性能与效率之间取…...
FPGA商用级ISP:动态坏点校正(DPCC)的滑窗架构与并行判决实现
【写在前面:为什么要写这个专栏?】在数字图像处理领域,ISP(图像信号处理器)的算法原理并不罕见,但真正能够支持 4K60fps 实时处理、并经过商用验证的 Verilog 硬核实现思路 却往往秘和封装在黑盒之中。我手…...
2026 工程指南:为什么 AWS Bedrock + Claude 4.6 正在成为多 Agent 协作的底层首选?
进入 2026 年第一季度,大模型领域的竞争已经从“单纯的参数规模”转向了“端到端的工程效率”。随着 GPT-5.4 陷入推理成本高企的泥潭,Anthropic 联手亚马逊发布的 Claude 4.6 托管方案,正在通过 Amazon Bedrock 平台迅速收割企业级市场。作为…...
用LVGL玩转嵌入式UI:5个实战控件代码详解(按钮/滑块/图片/标签/开关)
LVGL嵌入式UI开发实战:五大核心控件深度解析与代码优化 在资源受限的嵌入式设备上实现流畅美观的用户界面,一直是开发者面临的挑战。LVGL(Light and Versatile Graphics Library)作为一款轻量级开源图形库,凭借其丰富的…...
超越单一工具:在快马平台探索多模型ai辅助开发的全新工作流
在开发过程中,AI辅助工具已经逐渐成为提升效率的利器。最近我在尝试使用InsCode(快马)平台时,发现它提供的多模型AI辅助开发能力,远比单一工具更加强大和灵活。下面分享一个我实践的综合示例项目,展示如何利用平台的多模型能力优化…...
Arduino激光360°扫描库:VL53L0X+28BYJ-48低成本建图方案
1. 项目概述LaserToMap360 是一个面向嵌入式空间感知应用的轻量级 Arduino 库,专为构建低成本、可复现的 360 激光测距扫描系统而设计。其核心目标并非替代专业 SLAM 系统,而是提供一种工程上可快速验证、硬件上可即插即用、数据上可直接对接上位机可视化…...
LangGraph实战:5分钟给你的AI助手装上‘对话记忆’,告别每轮都是新朋友
LangGraph实战:5分钟为AI助手构建对话记忆系统 每次和AI对话都像初次见面?这个问题困扰着许多开发者。想象一下,你告诉助手"我叫Alex",下一句问"你知道我的名字吗?",它却一脸茫然地回答…...
从“高危论文”到“安心提交”:百考通双降技术,为真实思考护航
在一个人工智能可以生成万字论文的时代,最讽刺的现实不是机器冒充人类, 而是人类因写得太像“人写的论文”,被当作机器。 2026年,无数高校学子正陷入一场无声的困境: 你没用AI,却因逻辑清晰被标记…...
Win11Debloat:一键清理Windows 11,让你的电脑重回清爽状态
Win11Debloat:一键清理Windows 11,让你的电脑重回清爽状态 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各种其…...
能源监控项目避坑指南:为什么DLT645电表直连Modbus系统会失败?
能源监控项目避坑指南:为什么DLT645电表直连Modbus系统会失败? 在智慧能源项目的实施过程中,数据采集的可靠性直接关系到整个系统的运行效果。许多项目团队在遇到DLT645规约电表与Modbus系统对接时,往往会尝试直接连接,…...
