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

微信小程序(十七)自定义组件生命周期(根据状态栏自适配)

注释很详细,直接上代码

上一篇

新增内容:
1.获取手机状态栏的高度
2.验证attached可以修改数据
3.动态绑定样式数值

源码:

myNav.js

Component({lifetimes:{//相当于vue的created,因为无法更新数据被打入冷宫created(){},//相当于vue的mountedattached(){//{statusBarHeight}是ES6的解构赋值语法,用于从一个对象中提取属性值并赋给对应的变量或常量//从wx.getSystemInfoSync()返回的对象中提取了statusBarHeight属性的值,并将其赋给了名为statusBarHeight的常量const {statusBarHeight}=wx.getSystemInfoSync();//获取的是手机状态栏的高度console.log(statusBarHeight);//测试一下是否可以修改数据this.setData({test:20})}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {"test":0},/*** 组件的方法列表*/methods: {}
})

myNav.wxml

//将上边距设为状态栏高度即可避免刘海屏等样式的屏幕遮挡自定义控件
<view class="navigationBar custom-class" style="padding-top: {{test}}px;"><view class="navigationBarTitle title-class">自定义标题</view>
</view>

mynav.wxss

.navigationBar{background-color: cornflowerblue;height: 80rpx;display: flex;justify-content: center;align-items: center;
}.navigationBarTitle{font-weight: bold;
}

效果演示:

a在这里插入图片描述

组件的数据是不能像页面一样使用AppData查看的,这里演示一下查看方法

在这里插入图片描述
下一篇

相关文章:

微信小程序(十七)自定义组件生命周期(根据状态栏自适配)

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.获取手机状态栏的高度 2.验证attached可以修改数据 3.动态绑定样式数值 源码&#xff1a; myNav.js Component({lifetimes:{//相当于vue的created,因为无法更新数据被打入冷宫created(){},//相当于vue的mount…...

百度搜索智能精选是什么东西、怎么加入?

百度搜索智能精选是什么&#xff1f; 提问及具体展示如上图&#xff0c;这是白杨SEO一个好友提问的。他是觉得这个入口篇幅这么大&#xff0c;做宣传推广不错&#xff0c;问我是什么&#xff0c;怎么可以加入进去&#xff1f; 其实这就是百度搜索智能精选&#xff0c;只能是P…...

小程序开发平台:全功能小程序商城功能 带完整的安装代码包以及搭建教程

移动互联网的普及和用户对购物体验要求的提高&#xff0c;传统电商网站已经不能满足用户的需求。因此&#xff0c;许多商家开始将目光转向小程序商城&#xff0c;以提供更加便捷、高效的购物体验。然而&#xff0c;由于小程序开发门槛较高&#xff0c;许多商家和开发者对于小程…...

Vue3生命周期 VS Vue2生命周期(小记)

概念&#xff1a;Vue组件实例在创建时要经历一系列的初始化步骤&#xff0c;在此过程中Vue会在合适的时机&#xff0c;调用特定的函数&#xff0c;从而让开发者有机会在特定阶段运行自己的代码&#xff0c;这些特定的函数统称为&#xff1a;生命周期钩子。 规律&#xff1a; 生…...

MYSQL基本查询(CURD:创建、读取、更新、删除)

文章目录 前言一、Create1.全列插入2.指定列插入3.插入否则更新4.替换 二、Retrieve1.SELECT列2.WHERE条件3.结果排序4.筛选分页结果 三、Update四、Delete1.删除数据2.截断表 五、插入查询结果六、聚合函数 前言 操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型…...

头歌C语言指针进阶

目录 第1关&#xff1a;输出若干个学生成绩中的最高分.要求用指针函数实现 任务描述 第2关&#xff1a;采用指针变量表示地址的方法输入输出数组中的个元素 任务描述 相关知识&#xff08;略&#xff09; 编程要求 第3关&#xff1a;用指针实现数组循环移动 任务描述 第…...

民安智库-公共健身场所满意度调研

公共健身场所作为市民锻炼身心的热门场所&#xff0c;其满意度情况对于提升市民生活质量具有重要意义。民安智库近期受客户委托对某市进行了一项全面的公共健身场所满意度调查&#xff0c;旨在了解市民的需求与期望&#xff0c;为改善健身环境提供依据。 在本次调研中&#xf…...

《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)

文章目录 3.1 创建无序和有序列表&#xff08;&#x1f4dd;&#x1f31f;&#x1f44d; 信息的时尚搭配师&#xff09;3.1.1 基础示例&#xff1a;创建一个简单的购物清单3.1.2 案例扩展一&#xff1a;创建一个旅行计划清单3.1.3 案例扩展二&#xff1a;创建一个混合列表 3.2 …...

IBeginDragHandler,IEndDragHandler,IDragHandler拖拽接口

IBeginDragHandler, IEndDragHandler, 和 IDragHandler 是Unity的接口&#xff0c;用于处理拖拽相关的功能。需要引用 UnityEngine.EventSystems。 IBeginDragHandler 这个接口定义了一个方法&#xff0c;该方法在玩家开始拖拽一个对象时被调用。它通常用于初始化拖拽相关的变量…...

面试经典 150 题 ---- 删除排序数组中的重复项

面试经典 150 题 ---- 删除排序数组中的重复项 删除排序数组中的重复项方法一&#xff1a;双指针 删除排序数组中的重复项 方法一&#xff1a;双指针 有是一个原地修改的题目&#xff0c;大概率依旧是双指针。 定义 right 表示遍历数组到达的下标位置&#xff0c;left 指针表…...

深度学习(6)---Transformer

文章目录 一、介绍二、架构2.1 Multi-head Attention2.2 Encoder(编码器)2.3 Decoder(解码器) 三、Encoder和Decoder之间的传递四、Training五、其他介绍5.1 Copy Mechanism5.2 Beam Search 一、介绍 1. Transformer是一个Seq2Seq&#xff08;Sequence-to-Sequence&#xff09;…...

day34WEB 攻防-通用漏洞文件上传黑白盒审计逻辑中间件外部引用

目录 一&#xff0c;白盒审计-Finecms-代码常规-处理逻辑 黑盒思路&#xff1a;寻找上传点抓包修改突破获取状态码及地址 审计流程&#xff1a;功能点-代码文件-代码块-抓包调试-验证测试 二&#xff0c;白盒审计-CuppaCms-中间件-.htaccess 三&#xff0c;白盒审计-Metin…...

面试经典 150 题 ---- 移除元素

面试经典 150 题 ---- 移除元素 移除元素方法一&#xff1a;双指针方法二&#xff1a;双指针优化 移除元素 方法一&#xff1a;双指针 题目要求在原数组的基础进行元素的删除&#xff0c;所以输出的数组长度一定小于原数组的长度&#xff0c;因此可以使用双指针&#xff0c;r…...

12.如何将图像转化为矩阵形式

read_image (Image, printer_chip/printer_chip_01) *获取图片大小 get_image_size (Image, Width, Height) *获取区域里各点(每个点)的坐标 *Image 输入参数&#xff0c; *Rows 输出参数 数组&#xff0c; *Columns 输出参数&#xff0c;数组 get_region_points (Image, Rows…...

语义分割(2) :自定义Dataset和Dataloader

文章目录 1. 数据处理1.1 标签转换(json2mask和json2yolo)1.1.1 json2mask1.1.2 json2yolo 1.2 划分数据集1.2 不规范的标签图片处理1.3 批量修改图片后缀 2 自定义Dataset 和 Dataloader2.1 自定义Dataset2.1.1 数据增强(1) 对图像进行缩放并且进行长和宽的扭曲(2) 随机翻转图…...

Android Automotive:在路上释放 Android 操作系统的力量

Android Automotive&#xff1a;在路上释放 Android 操作系统的力量 Android 在汽车行业的历程车载信息娱乐系统 (IVI) 的演变汽车中的 Android&#xff1a;演变和进步Android 汽车操作系统的崛起Polestar 2&#xff1a;开创 Android 汽车体验Android 开源项目 (AOSP) 及其他项…...

从零开始做题:逆向 ret2shellcode orw

1.题目信息 BUUCTF在线评测 下载orw时防病毒要关闭 2.题目分析 orw是open、read、write的简写。有时候binary会通过prctl、seccomp进行沙箱保护&#xff0c;并不能getshell。只能通过orw的方式拿到flag。 fdopen&#xff08;‘./flag’); # 打开flag文件&#xff0c;得到fd…...

【DDD】学习笔记-限界上下文的控制力

引入限界上下文的目的&#xff0c;不在于如何划分&#xff0c;而在于如何控制边界。因此&#xff0c;我们就需要将对限界上下文的关注转移到对控制边界的理解。显然&#xff0c;对应于统一语言&#xff0c;限界上下文是语言的边界&#xff0c;对于领域模型&#xff0c;限界上下…...

springboot(ssm医院疫情防控系统 疫苗核酸预约系统Java系统

springboot(ssm医院疫情防控系统 疫苗核酸预约系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&a…...

go语言中的Mutex

Golang以其并发性Goroutines而闻名。不仅是并发&#xff0c;还有更多。 因此&#xff0c;在这种情况下&#xff0c;我们必须确保多个goroutines不应该同时试图修改资源&#xff0c;从而导致冲突。 为了确保资源一次只能被一个goroutine访问&#xff0c;我们可以使用一个叫做syn…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...