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

注释很详细,直接上代码

上一篇

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

下一篇

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

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

相关文章

从CDN了解到的边缘计算与前端渲染

文章概叙 本文代码量较少&#xff0c;讲的是在云开发的基础上使用边缘计算的&#xff0c;代码量不高&#xff0c;​建议看完理解下就可以丢了&#xff0c;知道个概念就好。 废话1 第一次接触边缘计算是在2020年的时候&#xff0c;公司的cloud课程中&#xff0c;有一些相关概…

2024年第四届机器人与人工智能国际会议(JCRAI 2024) | Ei、Scopus双检索

会议简介 Brief Introduction 2024年第四届机器人与人工智能国际会议(JCRAI 2024) 会议时间&#xff1a;2024年8月9日-11日 召开地点&#xff1a;中国上海 大会官网&#xff1a;www.jcrai.org 人工智能和机器人技术在过去几十年里得到了长足的发展&#xff0c;为未来的机器人应…

php二次开发股票系统代码:腾讯股票数据接口地址、批量获取股票信息、转换为腾讯接口指定的股票格式

1、腾讯股票数据控制器 <?php namespace app\index\controller;use think\Model; use think\Db;const BASE_URL http://aaaaaa.aaaaa.com; //腾讯数据地址class TencentStocks extends Home { //里面具体的方法 }2、请求接口返回内容 function juhecurl($url, $params f…

力扣刷题 第十二 边权重均等查询

现有一棵由 n 个节点组成的无向树&#xff0c;节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi, wi] 表示树中存在一条位于节点 ui 和节点 vi 之间、权重为 wi 的边。 另给你一个长度为 m 的二维整数数…

2024年华为OD机试真题-靠谱的车-Python-OD统一考试(C卷)

题目描述: 程序员小明打了一辆出租车去上班。出于职业敏感,他注意到这辆出租车的计费表有点问题,总是偏大。 出租车司机解释说他不喜欢数字4,所以改装了计费表,任何数字位置遇到数字4就直接跳过,其余功能都正常。 比如: 1. 23再多一块钱就变为25; 2. 39再多一块…

yum找不到 mysql-server

User sudo yum install mysql-server 已加载插件&#xff1a;fastestmirror Loading mirror speeds from cached hostfile base: mirrors.aliyun.comepel: mirror.01link.hkextras: mirrors.ustc.edu.cnupdates: mirrors.ustc.edu.cn 没有可用软件包 mysql-server。 错误&…

C++算法学习心得七.贪心算法(2)

1.跳跃游戏&#xff08;55题&#xff09; 题目描述&#xff1a; 给定一个非负整数数组&#xff0c;你最初位于数组的第一个位置。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个位置。 示例 1: 输入: [2,3,1,1,4]输出: true解释: 我们…

【前端基础--4】

定位属性 position 可以将元素定位到你想要放到位置&#xff0c;使用方位值来进行移动(top,left,right,bottom)。 1.相对定位 position: relative; top: 20px; left: 20px; 以自身为定点进行移动&#xff0c;不会脱离文档流。 不会影响元素本身的性质&#xff1b;块级…

性能优化-OpenCL 介绍

「发表于知乎专栏《移动端算法优化》」 本文首先对 GPU 进行了概述&#xff0c;然后着重地对移动端的 GPU 进行了分析&#xff0c;随后我们又详细地介绍了 OpenCL 的背景知识和 OpenCL 的四大编程模型。希望能帮助大家更好地进行移动端高性能代码的开发。 &#x1f3ac;个人简介…

RisingWave 多流 Join 实现高效实时数据打宽

在公司业务场景中&#xff0c;通常需要使用流计算引擎从多个数据源获取数据、进行 ETL 操作&#xff0c;并将清洗后的数据导入到数据分析系统或数据湖中。由于最后产生出来的表是一张宽表&#xff0c;我们通常也称这个过程为“数据打宽“。 数据打宽在流处理系统中对应的操作便…

34.在排序数组中查找元素的第一个和最后一个位置(力扣LeetCode)

文章目录 34.在排序数组中查找元素的第一个和最后一个位置题目描述二分 34.在排序数组中查找元素的第一个和最后一个位置 题目描述 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组…

将小游戏打包成单一exe文件的原理及应用

哈喽大家好&#xff0c;我是咕噜美乐蒂&#xff0c;很高兴又见面啦&#xff01;本文将介绍将小游戏原版文件打包成单一exe文件的原理&#xff0c;并探讨了这种打包方式的优点和应用场景。通过对打包工具和编译器的介绍&#xff0c;解释了它们如何将游戏的所有相关文件合并到一个…

Fiddler 过滤地址设置及导出JMeter脚本插件原理

Fiddler 过滤地址设置 1、在fiddler右边工具栏中找到Filters过滤器->勾选&#xff1a;Use Filters->在hosts中选择过滤规则和要过滤的地址。 如下图&#xff1a; 2、点击【Actions】按钮&#xff0c;选择&#xff1a;Run Filterset now&#xff0c;就会立即生效&#x…

nginx限制ip访问

先看一下被禁止的效果 如何配置 禁止访问的话直接在location模块增加类似如下配置 deny all; 完整示例 location / {deny all;root html;index index.html index.htm;} 默认是allow all就是允许所有ip访问,如果只配置指定ip可以访问是无效的,还是所有的ip可以访问 无效示例…

Unity动画桢事件

1&#xff0c;使用原因 在新项目内部审核的时候&#xff0c;说什么动画节奏不匹配&#xff0c;所以决定用动画桢事件来处理技能释放。当释放技能的时候&#xff0c;先播放技能动画&#xff0c;然后再动画桢所在的时间戳执行技能的逻辑。 2&#xff0c;具体实现 1&#xff0c;…

v3+ECharts 地图实现多个自定义图片的图标

备注&#xff1a;地图json, 图标图片 准备替换下 <template><div ref"mapEcharts" class"map-echart"></div> </template><script setup langts> import * as echarts from echarts import mapcity from "/tool/map/m…

【SpringBoot篇】springboot的自动装配原理

文章目录 &#x1f3f3;️‍&#x1f308;什么是自动装配&#x1f339;SpringBoot的自动装配&#x1f354;具体操作 &#x1f3f3;️‍&#x1f308;什么是自动装配 自动装配&#xff08;Auto-Configuration&#xff09;是Spring Boot框架的一个核心特性之一&#xff0c;它通过…

走进课本中的知名景区,猿辅导带你“读课文 游中国”

课本里&#xff0c;你能“看见”的世界不止一面&#xff0c;一座山川&#xff0c;崇高肃穆下孕育出千年的文明&#xff1b;一座桥梁&#xff0c;连接起时间的变迁和技术的传承&#xff1b;一座古楼&#xff0c;飞檐斗拱间凝聚着中国文化的精髓。近日&#xff0c;猿辅导素养课宣…

2024年新提出的算法:一种新的基于数学的优化算法——牛顿-拉夫森优化算法|Newton-Raphson-based optimizer,NRBO

1、简介 开发了一种新的元启发式算法——Newton-Raphson-Based优化器&#xff08;NRBO&#xff09;。NRBO受到Newton-Raphson方法的启发&#xff0c;它使用两个规则&#xff1a;Newton-Raphson搜索规则&#xff08;NRSR&#xff09;和Trap Avoidance算子&#xff08;TAO&#…

光电耦合隔离器在医疗行业的应用全面分析

光电耦合隔离器作为一种关键的电子元件&#xff0c;在医疗行业中扮演着重要的角色。光电耦合隔离器通过将电信号转换为光信号&#xff0c;并在隔离通道中传输&#xff0c;能够有效地隔离输入和输出端&#xff0c;保证医疗设备在电气上的安全性。 光电耦合隔离器的医疗应用领域 …