当前位置: 首页 > 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…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...