学习Uni-app开发小程序Day11

今天是学习的第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.hqwc.cn/news/701963.html

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

相关文章

企业OA办公系统开发笔记:2、MyBatis-Plus

文章目录 企业办公系统&#xff1a;2、MyBatis-Plus一、MyBatis-Plus1、简介2、主要特点3、依赖 二、MyBatis-Plus入门1、配置文件2、启动类3、实体类4、添加Mapper类5、测试Mapper接口6、CRUD测试6.1、insert添加6.1.1、示例6.1.2、主键策略 6.2、更新6.3、删除6.3.1、根据id删…

MSR810-LM快速配置通过LTE模块上网

正文共&#xff1a;1111 字 13 图&#xff0c;预估阅读时间&#xff1a;1 分钟 之前买了一个无线版本的MSR810-W&#xff08;淘了一台二手的H3C企业路由器&#xff0c;就用它来打开网络世界的大门&#xff09;&#xff0c;并整理了一份快速配置&#xff08;脚本案例来了&#x…

20240514,算法(算数生成,集合)

还有一个大案例&#xff0c;那个就不急了&#xff0c;完结撒花&#xff0c;起码C是打代码没什么大问题的完结&#xff0c;不像C&#xff0c;还要我返工/笑哭 常用算数生成算法 属于小算法&#xff0c;头文件 #include <numeric> accumulate //计算容器累计总和fill /…

霍廷格电源 Tru plasma DC3030 通快DC3040 MF3030

霍廷格电源 Tru plasma DC3030 通快DC3040 MF3030

根据后端返回下拉请求地址,前端动态请求拿到下拉数据渲染

完整代码如下&#xff1a; <template> <!-- 资源列表页 --> <div> <div> <i click"$router.go(-1)" style" color: #409eff; cursor: pointer; margin-right: 5px; font-size: 18px; " class"el-icon-back" ><…

读人工智能时代与人类未来笔记03_演变

1. 演变 1.1. 每个社会都找到了属于自己的一套适应世界的方法 1.1.1. 适应的核心&#xff0c;是有关人类心智与现实之间关系的概念 1.1.2. 人类认识周围环境的能力 1.1.2.1. 这种能力通过知识获得&#xff0c;同时也受到知识…

快速上手并行执行——《OceanBase 并行执行》 系列 7

并行执确实是一个涵盖多个层面的复杂主题&#xff0c;它需要投入一定的时间和精力来深入理解&#xff0c;才能充分掌握其功能。为了帮助初学者更快地掌握并行执行的技巧&#xff0c;我们提供了这份Quick Start&#xff0c;它适用于 OceanBase 3.1版本及以上的版本。虽然这里所…

专业PDF编辑软件Acrobat Pro DC 2022 for Mac中文版下载

Adobe Acrobat Pro DC 2022是一款PDF处理的软件&#xff0c;能够辅助MAC的用户进行PDF的各种文件上的操作&#xff0c;对于用户而言它以极为优秀和卓越的PDF体验来让用户使用起来更为的轻松一些&#xff0c;对于用户而言这款Adobe Acrobat Pro DC 2022绝对是Mac上面最佳的PDF工…

项目组GIT操作规范

分支规范 在开发过程中&#xff0c;一般会存在以下几种分支&#xff1a; main分支(master) master为主分支&#xff0c;也是用于部署生产环境的分支&#xff0c;一般由 dev 以及 fixbug分支合并&#xff0c;任何时间都不能直接修改代码。dev分支 develop 为开发分支&#xff…

C++ | Leetcode C++题解之第89题格雷编码

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> grayCode(int n) {vector<int> ret(1 << n);for (int i 0; i < ret.size(); i) {ret[i] (i >> 1) ^ i;}return ret;} };

嵌入式学习——Shell(流指针、文件读写函数)——day20

1. 标准IO和文件IO的区别 1. 标准IO是一种有缓存的IO形式&#xff08;接收了一部分内容后给到linux内核中&#xff09; 2. 文件IO是一种没有缓存的IO形式&#xff08;即刻交给linux内核&#xff0c;及时性&#xff09; 3. 标准IO是库函数,库函数可以在Windows和Linux系统中都能…

Linux下Code_Aster源码编译安装及使用

目录 软件介绍 基本依赖 其它依赖 一、源码下载 二、解压缩 三、编译安装 四、算例运行 软件介绍 Code_aster为法国电力集团&#xff08;EDF&#xff09;自1989年起开始研发的通用结构和热力耦合有限元仿真软件。Code_aster可用于力学、热学和声学等物理现象的仿真分析&…