学习Uni-app开发小程序Day11

news2025/1/22 15:56:13
今天是学习的第11天,今天学习了组件的生命周期,这里的生命周期,主要是学习uni-app的组件生命周期,虽然vue也有,但主要还是学习uni-app的。

1. onLoad
监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),这是官方文档,个人理解这就是页面创建,已经把需要显示的布局等都已经准备好了;
调用方式:
在这里插入图片描述
在script中引入,这里需要注意的是引入的是:@dcloudio/uni-app;
还有就是页面传参,这是在跳转的时候,在url后面添加参数,例如:
在这里插入图片描述
在子页面的onload中就能直接使用了

2. onShow
监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面。每一次展示页面的时候,都会触发这个方法。
是在onLoad之后,数据显示到屏幕上的。
在这里插入图片描述
这是引用方法
现在有两个页面,A页面、B页面;当进入A页面后,执行onLoad、onShow;跳转到B页面后,在进入A页面,就只执行onShow

3. onReady
监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发,和vue中的onMounted一样。例如:在模版(template)中添加一个 <scroll-view scroll-y="true" ref="scroll"> <view></view> </scroll-view>
如果定义scroll,在onload中是获取不到的,只能是在onReady中才能获取到
定义一个scroll, const scroll=ref(值)在这里插入图片描述
这就是如果要操作dom节点,要在onReady中操作
4. onHide
监听页面隐藏;就是离开当前页面,就进入这个方法;
例如:播放器,正在播放,当退出这个页面后,执行onHide,在这个方法下设置暂停,在进入后就按照之前的播放点进行播放
这个是和onShow关联的,在页面刚进入的时候,就会进入onShow,所以回复播放的时候,在onShow中进行的恢复运行的
5. onBeforeMount
组件被挂载之前被调用,这是vue的组件生命周期。这是在onShow后面执行的
当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
6. onUnload
监听页面卸载,当A页面跳转到B页面后,A页面卸载了就执行
7. onPageScroll
监听页面滚动,当页面数据下滑到一定位置的时候,调用该方法

下面是使用办法

	//滚动监听,当页面在下滑到一定位置的时候,给一个提示框等,
	onPageScroll((e)=>{
		console.log(e.scrollTop);	
		fixed.value = e.scrollTop>200
		
	})

下面是页面的数据

	<view v-for="item in 50">{{item}}</view>
		
		<view class="fixed" v-if="fixed"></view>

以上是常用的组件生命周期,发现,常用的还是uni-app中的组件生命周期,关于生命周期的知识点,老师视频也给出了详细文档,大家根据需要可以自行查看下
uniappVue3版本中组件生命周期和页面生命周期的详细介绍

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

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

相关文章

Python新手注意:避免常见错误,学会‘/’和‘\’的正确使用

Python 编程语言中的正反斜杠符号&#xff08;‘/’和‘\’&#xff09;是非常基础但又极其重要的元素&#xff0c;它们在不同的场合下扮演着不同的角色。了解这两个符号的意义和用法&#xff0c;对于编写清晰、有效的代码至关重要。 基础概念 正斜杠&#xff08;‘/’&#…

Image to Music V2 :只需上传一张照片,自动转换成与图片内容匹配的音频!

前言 我们之前肯定已经见过了很多文本生成图片、文本生成声音以及AI翻唱歌曲 等多种AI产品&#xff08;模型&#xff09;。 其实音乐和图片从某种意义上来说都是艺术创作的一种形式&#xff0c;它们可以相互配合&#xff0c;共同呈现出一种更加丰富、感性的表达方式。 将图片…

vue+vant项目0-1快速发布到--钉钉应用

uniapp开发笔记----vue开发项目配置钉钉应用 一、 vuevant开发项目1. 自定义vuevant项目或者已经有的旧项目1. 自定义vuevant项目1. 创建vue项目2. 安装依赖3. 引入所有组件4. 使用一个组件/效果和代码如下&#xff1a; 2. git官网仓库&#xff0c;直接拉默认dome代码3. 打包项…

优思学院:精益六西格玛如何影响企业文化?

精益六西格玛&#xff08;Lean Six Sigma&#xff09;是一种在优化生产过程、提高效率、减少浪费的管理方法论。其影响远不止于生产线或质量控制部门&#xff0c;实际上&#xff0c;精益六西格玛的实施可以深刻影响企业文化的各个层面&#xff0c;從而令企業獲得真正最大的成功…

游戏中的设计模式一

游戏开发是一个快速迭代的过程&#xff0c;代码复杂度也很高&#xff0c;借助于设计模式&#xff0c;可以帮助我们降低复杂度&#xff0c;降低系统间的耦合&#xff0c;从而高效高质的做出交付。 最近读了这本书&#xff1a;《游戏编程模式》[1]&#xff0c;很受启发&#xff…

AC/DC电源模块的可靠性设计与测试方法

BOSHIDA AC/DC电源模块的可靠性设计与测试方法 AC/DC电源模块是一种将交流电能转换为直流电能的设备&#xff0c;广泛应用于各种电子设备中&#xff0c;如电脑、手机充电器、显示器等。由于其关系到设备的供电稳定性和安全性&#xff0c;因此可靠性设计和测试是非常重要的。下…

AI绘画Stable Diffusion换脸插件ReActor 不香了,新一代换脸神器 InstantID!

前 言 之前我介绍了 SD 中的一款换脸插件 ReActor&#xff0c;虽然好使&#xff0c;但是安装还是有些许麻烦的。 今天给小伙伴们介绍一款新型的换脸插件&#xff1a;InstantID&#xff0c;主要是使用 ControlNet 和 IP-Adapter 的组合来控制扩散过程中的面部特征。 一句话&a…

「JavaEE」多线程案例分析2:实现定时器

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 实现定时器 &#x1f349;简介&#x1f349;模拟实现定时器 &#x1f349;简介 定时器类似一个闹钟&#xff0c;时间到了之后就会执行…

【全开源】JAVA国际版多语言语聊大厅语音聊天APP系统源码

JAVA国际版多语言语聊大厅语音聊天APP系统源码——深度解析市场需求&#xff0c;打造全球化语音社交平台 随着全球化的推进和移动互联网的普及&#xff0c;人们对于语音聊天的需求日益增长。尤其是在国际交流日益频繁的今天&#xff0c;一个支持多语言、覆盖全球用户的语音聊天…

分布式搜索-elaticsearch基础 概念

什么是elaticsearch: 倒排索引&#xff1a;就是将要查询的内容分成一个个词条&#xff0c;在将词条文档id存入&#xff0c;词条是唯一的。 文档词条总结: mysql和Elasticsearch概念对比: 架构: 基本概念总结:

互联网盲盒小程序开发,提高商家在市场中的竞争力

随着人们生活水平的提高&#xff0c;对娱乐消费需要也在慢慢增加&#xff0c;潮玩市场也因此得到了快速发展&#xff0c;尤其是盲盒&#xff0c;深受大众的喜爱&#xff0c;现在在各大商场以及各种社交平台上都能看到盲盒的身影&#xff0c;市场影响力非常大&#xff01; 在当…

FastAPI:Python打造高效API的终极武器

在Python的世界里&#xff0c;如果你想要一个既快速又现代的方式来构建API&#xff0c;那么FastAPI可能是你的首选。这个库基于Starlette&#xff08;用于Web编程&#xff09;和Pydantic&#xff08;用于数据验证&#xff09;&#xff0c;专门为速度和易用性设计。 什么是FastA…

搞懂Docker(九)- 使用Docker Compose

获取示例程序 示例程序 或者 示例程序 获取示例程序程序结构如下├── getting-started-app/ │ ├── package.json │ ├── README.md │ ├── spec/ │ ├── src/ │ └── yarn.lock使用Docker Compose Docker Compose是一个帮助你定义和共享多容器应用程序的工具…

Linux系统编程:进程控制

1.进程创建 1.1 fork函数 fork&#xff08;&#xff09;通过复制调用进程来创建一个新进程。新进程称为子进程&#xff0c;是调用进程的精确副本 进程&#xff0c;但以下几点除外&#xff1a; 子进程有自己的PID&#xff0c;此PID与任何现有进程组的ID不匹配子进程的父进程ID…

qt: undefined reference to `vtable for aaa‘

版本qt4.8.6&#xff0c;编译报错“main.cpp:(.text0x3b): undefined reference to vtable for aaa” 就一个main.cpp #include <QApplication> #include <QTimer> #include <QCursor> #include <QMouseEvent> #include <QDesktopWidget> #inc…

代驾+顺风车+货运app功能介绍

代驾货运顺风车同城拼车打车网约车系统源码app小程序是一个功能丰富的平台&#xff0c;支持二次开发和定制&#xff0c;以满足不同运营商的需求。以下是关于该系统的功能详情介绍&#xff1a; 一、核心功能 会员管理&#xff1a;包括用户注册、登录、个人信息管理等功能&…

yarn 安装以及报错处理

前一种报错是由于没有安装yarn导致的&#xff0c;使用以下命令即可安装&#xff1a; npm install -g yarn 如果成功安装&#xff0c;将显示Yarn的版本号。 yarn --version 第二种报错是因为系统上的执行策略限制导致的。执行策略是一种安全功能&#xff0c;用于控制在计算机…

第15节 编写shellcode加载器

我最近在做一个关于shellcode入门和开发的专题课&#x1f469;&#x1f3fb;‍&#x1f4bb;&#xff0c;主要面向对网络安全技术感兴趣的小伙伴。这是视频版内容对应的文字版材料&#xff0c;内容里面的每一个环境我都亲自测试实操过的记录&#xff0c;有需要的小伙伴可以参考…

HCIP的学习(17)

BGP基础配置 使用直连接口IP地址来建立EBGP对等体关系 1、启动BGP协议 [r1]bgp 100 ----启动BGP协议&#xff0c;并且规定其AS号2、配置设备的RID数值&#xff0c;一般选择设备的loopback接口的IP地址 [r1-bgp]router-id 1.1.1.13、配置BGP对等体信息&#xff0c;包含了对等体…

【声呐仿真】学习记录3-待续

【声呐仿真】学习记录3-后续 第五阶段-获取数据1.运行赫尔库勒斯沉船的世界&#xff1a;2.键盘操纵rov至合适的位置&#xff0c;调整Image topic&#xff0c;查看输出图像3.RVIZ SONAR 图像查看器插件&#xff08;没有对应的topic&#xff09;4.点云5.录制rosbag 第六阶段-查看…