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

微信小程序(十五)自定义导航栏

注释很详细,直接上代码

上一篇

新增内容:
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;
}

下一篇

相关文章:

微信小程序(十五)自定义导航栏

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.组件文件夹创建方法 2.自定义组件的配置方法 3.外部修改组件样式&#xff08;关闭样式隔离或传参&#xff09; 创建组件文件夹 如果是手动创建建议注意在json文件声明&#xff1a; mynav.json {//声明为组件可…...

Python3进行pdf文件分割及转word

今天有个pdf分割的需求&#xff0c;电脑装的Python3&#xff0c;网上查资料都是Python2的代码&#xff0c;所以整理一份3的 安装&#xff1a; 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位&#xff08…...

QT 中如何使用 JSON 功能?

在 Qt 中&#xff0c;您可以使用 QJsonDocument、QJsonObject 和 QJsonArray 类来处理 JSON 数据。以下是一个简单的示例&#xff0c;说明如何在 Qt 中使用这些类来解析和生成 JSON 数据&#xff1a; 1. 包含必要的头文件 首先&#xff0c;确保您的项目中包含了必要的 Qt JSO…...

C++面试:算法的执行效率和资源消耗、时间和空间复杂度分析根据实际场景,选用合适的数据结构和算法进行程序设计

目录 算法的执行效率和资源消耗、时间和空间复杂度分析 执行效率和资源消耗 时间复杂度分析 空间复杂度分析 实际应用 面试技巧 根据实际场景&#xff0c;选用合适的数据结构和算法进行程序设计 所根据原则 实例 如何选择数据结构示例 合适的数据结构&#xff1a;哈…...

力扣100215-按键变更的次数

按键变更的次数 题目链接 解题思路 我们发现只要相邻的两个字母不一样(大小写算一样)&#xff0c;那么按键变更次数就要加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&#xff1f; GPIO&#xff08;通用输入/输出&#xff09;是一种用于与外部设备进行数字通信的通用硬件接口。它允许微控制器或其他数字电路的引脚以灵活的方式配置为输入或输出&#xff0c;并在运行时进行动态控制。GPIO可用于连接和控制各种外围…...

倒计时80天

1.J-兔子不会种树_浙江机电职业技术学院第八届新生亮相赛&#xff08;同步赛&#xff09; (nowcoder.com) /****** __----~~~~~~~~~~~------___* . . ~~//...... __--~ ~~…...

PBM模型参数详解

本专栏着重讲解PBM学习所得&#xff0c;学习笔记、心得&#xff0c;并附有视频素材资料&#xff0c;视频详细目录如下&#xff1a; PBM相关参数解释1PBM相关参数解释2PBM相关案例实践1PBM相关案例实践2PBM相关案例实践2PBM相关案例实践3PBM多相流中次相界面设置1PBM多相流中次…...

贪吃蛇/链表实现(C/C++)

本篇使用C语言实现贪吃蛇小游戏&#xff0c;我们将其分为了三个大部分&#xff0c;第一个部分游戏开始GameStart&#xff0c;游戏运行GameRun&#xff0c;以及游戏结束GameRun。对于整体游戏主要思想是基于链表实现&#xff0c;但若仅仅只有C语言的知识还不够&#xff0c;我们还…...

Qlik Sense : IntervalMatch(离散匹配)

什么是IntervalMatch IntervalMatch 前缀用于创建表格以便将离散数值与一个或多个数值间隔进行匹配&#xff0c;并且任选匹配一个或多个额外关键值。 语法&#xff1a; IntervalMatch (matchfield)(loadstatement | selectstatement ) IntervalMatch (matchfield,keyfield…...

MySql45讲-08.事务到底是隔离的还是不隔离的?(结合MVCC视频)

命令的启动时机 begin/start transaction 命令并不是一个事务的起点&#xff0c;在执行到它们之后的第一个操作InnoDB表的语句&#xff0c;事务才真正启动。如果你想要马上启动一个事务&#xff0c;可以使用start transaction with consistent snapshot 这个命令。 事务的版本…...

备战蓝桥杯----数据结构及STL应用(基础2)

上次我们讲了vector的大致内容&#xff0c;接下来让我们讲一下栈&#xff0c;队列吧&#xff01; 什么是栈呢&#xff1f; 很简单&#xff0c;我们用的羽毛球桶就是&#xff0c;我们取的球&#xff0c;是最后放的&#xff0c;栈是一种先进后出的数据结构。 方法函数 s.push(…...

日常学习之:vue + django + docker + heroku 对后端项目 / 前后端整体项目进行部署

文章目录 使用 docker 在 heroku 上单独部署 vue 前端使用 docker 在 heroku 上单独部署 django 后端创建 heroku 项目构建 Dockerfile设置 settings.pydatabase静态文件管理安全设置applicaiton & 中间件配置 设置 requirements.txtheroku container 部署应用 前后端分别部…...

LangGraph:一个基于LangChain构建的AI库,用于创建具有状态、多参与者的应用程序

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

04-Nacos-服务注册基于spring boot实现

官方参考 在不依赖spring cloud 组件基础上&#xff0c;单独的微服务项目&#xff0c;实现nacos接入 1、依赖文件pom.xml <dependency><groupId>com.alibaba.boot</groupId><artifactId>nacos-discovery-spring-boot-starter</artifactId><…...

iOS 闭包和Block的区别

iOS 闭包和Block的区别 原文地址: mob64ca12eb7baf 引言 在iOS开发中&#xff0c;闭包和Block是两个常用的概念。它们都是将一段代码作为变量传递和使用的方式。尽管它们在实现上有一些相似之处&#xff0c;但它们之间还是存在一些重要的区别。本文将会详细介绍闭包和Block的…...

后端学习笔记——后端细碎知识点(每天更新......)

细碎知识点 主要是go后端&#xff0c;也会设计到python、java的知识&#xff0c;懒得分类整理&#xff0c;所以都写在一篇文章里面了&#xff0c;方便自己查看笔记。 context.BindJSON获取POST请求中的json数据gin.H封装了生成json的方式 common.ReturnJSONSuccess(c, gin.H{&…...

二进制中1的个数

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…...

python+matlab text(按图的相对位置显示)

python 用 python 画图时&#xff0c;如果想采用归一化的坐标来指定文本框的位置&#xff0c;则需要用到 transform ax.transAxes 参数&#xff0c;如 ax plt.gca() plt.text(0.1,0.2, "text", fontsize 20, transform ax.transAxes)matlab 方法1 text(___,Name…...

用华为ENSP模拟器复现智慧小区网络:从VLAN划分到三层架构的保姆级配置教程

华为ENSP模拟器实战&#xff1a;智慧小区网络从零搭建全流程指南 当你第一次拿到智慧小区网络设计方案时&#xff0c;那些抽象的拓扑图和配置参数是否让你望而生畏&#xff1f;作为网络工程师成长路上的必经之路&#xff0c;企业级网络搭建从来不是纸上谈兵的游戏。本文将带你用…...

MedGemma 1.5开源医疗模型:本地化部署满足等保2.0三级与GDPR双合规要求

MedGemma 1.5开源医疗模型&#xff1a;本地化部署满足等保2.0三级与GDPR双合规要求 1. 项目概述与核心价值 MedGemma 1.5是基于Google Gemma架构开发的医疗专用AI模型&#xff0c;专门针对医学问答、病理分析和术语解释场景优化。这个4B参数规模的模型经过PubMed、MedQA等专业…...

SNAP小白必看:哨兵1 SLC数据预处理全流程详解(附避坑指南)

SNAP小白必看&#xff1a;哨兵1 SLC数据预处理全流程详解&#xff08;附避坑指南&#xff09; 在遥感数据处理领域&#xff0c;哨兵1号卫星提供的SLC&#xff08;Single Look Complex&#xff09;数据因其高分辨率和极化信息&#xff0c;成为地表监测、灾害评估等领域的重要数据…...

Qwen3.5-27B-GPTQ-Int4:超高效多模态AI新体验

Qwen3.5-27B-GPTQ-Int4&#xff1a;超高效多模态AI新体验 【免费下载链接】Qwen3.5-27B-GPTQ-Int4 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3.5-27B-GPTQ-Int4 导语 阿里云推出Qwen3.5-27B-GPTQ-Int4模型&#xff0c;通过4位量化技术实现性能与效率的双…...

Xilinx Video IP实战:如何将HDMI输入转换为AXI4-Stream(附仿真+上板测试)

Xilinx Video IP实战&#xff1a;HDMI转AXI4-Stream全流程开发指南 在FPGA视频处理系统中&#xff0c;将HDMI等视频输入接口转换为标准化的AXI4-Stream协议是构建复杂视频处理流水线的关键第一步。不同于简单的接口转换&#xff0c;这一过程涉及视频时序解析、数据位宽适配、时…...

FanControl:颠覆式开源风扇控制工具的全方位应用指南

FanControl&#xff1a;颠覆式开源风扇控制工具的全方位应用指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/…...

开源工具wxappUnpacker:微信小程序逆向解析实战指南

开源工具wxappUnpacker&#xff1a;微信小程序逆向解析实战指南 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 模块一&#xff1a;工具定位与价值——小程序开发的逆向工程利器 完成本节学习后你将能够&#xff1a;…...

OpenClaw开发辅助:Qwen3.5-9B实现日志分析与错误自动修复

OpenClaw开发辅助&#xff1a;Qwen3.5-9B实现日志分析与错误自动修复 1. 为什么需要AI辅助日志分析&#xff1f; 每次凌晨被报警短信吵醒&#xff0c;盯着密密麻麻的日志文件找异常时&#xff0c;我都会想&#xff1a;如果能有个AI助手帮我自动分析日志、定位问题甚至尝试修复…...

LangChain4j vs Spring AI:Java AI 框架技术选型深度对比与生产落地指南

LangChain4j vs Spring AI:Java AI 框架技术选型深度对比与生产落地指南 摘要:当 Java 团队建设 AI 应用时,真正困难的通常不是“能否调通模型”,而是“如何把 Prompt、RAG、工具调用、可观测性、限流熔断、灰度发布、权限隔离与业务系统稳定地耦合起来”。本文不再停留在 …...

日志分散难管理?用Visual Syslog Server实现企业级日志集中监控的5个实战方案

日志分散难管理&#xff1f;用Visual Syslog Server实现企业级日志集中监控的5个实战方案 【免费下载链接】visualsyslog Syslog Server for Windows with a graphical user interface 项目地址: https://gitcode.com/gh_mirrors/vi/visualsyslog 痛点诊断&#xff1a;日…...