微信小程序:页面生命周期

摘要:
加载页面时触发。通常,在onLoad中发送异步请求以初始化页面数据。显示页面时触发3。onReady:隐藏页面时触发。当当前页面跳转时,也相当于隐藏当前页面。卸载(关闭)页面时触发。NavigateBack关闭当前页面。在app.json中配置允许下拉刷新时,下拉页面将具有下拉刷新的效果。下拉刷新通常需要初始化页面数据,当页面被上拉并触底时会触发。

小程序生命周期分为应用生命周期和页面生命周期

微信小程序:页面生命周期第1张

1、Onload:页面加载时触发,一般在onLoad中发送异步请求来初始化页面数据。

2、onShow:页面显示时触发

3、onReady:页面初次渲染完成时触发。

4、onHide:是页面隐藏时触发,注意不是应用隐藏,切后台时,页面就会隐藏。即整个小程序隐藏时,页面也就隐藏了。另外,在当前页面跳转的时候也相当于当前页面隐藏。

 微信小程序:页面生命周期第2张

5、onUpload:页面卸载(关闭)时触发,当open-type为redirect,reLaunch,navigateBack时都是关闭当前页面,也即卸载当前页面。

 微信小程序:页面生命周期第3张

6、onPullDownRefresh:监听用户的下拉动作,当在app.json中配置了允许下拉刷新,在页面中往下拉动就会有下拉刷新的效果。还可以设置下拉刷新时的背景颜色。

 微信小程序:页面生命周期第4张

微信小程序:页面生命周期第5张

下拉刷新时往往需要对页面数据就行初始化,重新发请求来拿数据。

7、onReachBottom:页面上拉触底时才会触发。 如果页面高度不够,就不会发生滚动,也就没有页面上拉触底。故需要让页面出现上下滚动才行。

如何才能实现页面出现上下滚动呢?加一堆view标签就可以了。输入view{$}*100,就会出现100个标签。

onReachBottom中做上拉加载下一页数据的操作

8、onShareAPPMessage:用户点击右上角转发的时候才会触发,点击右上角的三个点就会弹出转发按钮。点击转发按钮后,由于应用和页面都被隐藏了,所以打印效果如下。

 微信小程序:页面生命周期第6张

9、onPageScroll:表示页面滚动就可以触发,

10、onResize:页面尺寸改变时触发。由于手机屏幕是固定的,这种情况很少发生,但在小程序发生横屏和竖屏切换时会触发。使小程序中的页面支持屏幕旋转的方法是:在app.json的window段中设置“pageOrientation”:“auto”,这样所有页面都可以发生屏幕旋转,或在页面json文件中配置“pageOrientation”:“auto”,这样只有当前页面发生屏幕旋转。

11、onTabItemTap:当前是标签页(顶部或底部有tabBar的页面),再点击自己的tab item时才会触发。如当前页是标签页demo4,tabBar中点击demo4时才会触发。而点击其他的Tab item则不会触发。

先使当前页面变成tabBar页面,即在app.jsontabBar中在新增一项

微信小程序:页面生命周期第7张

 微信小程序:页面生命周期第8张

 微信小程序:页面生命周期第9张

免责声明:文章转载自《微信小程序:页面生命周期》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CentOS7安装emqQt样式表的使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C#中实现web端展示JT文件

最近在公司项目中,碰到了需要在web端展示JT格式文件的3D图形,找了好多资料,最后实现了。 主要是将*.jt文件转换成*.html文件,然后将html文件用iframe嵌入到网页中展示。 效果为: 那么如何将*.jt文件转换成*.html文件呢? 那就需要先安装西门子的一个免费的软件:JT2GO 提取码:c7kh。 装完之后,JT2GO软件本身有将JT...

JS-获取URL请求参数

前言:原来做过一个项目,需要实现一个页面打印的功能,由于项目中使用了AngularJS+Bootstrap等前端框架,需要打印的页面又在弹出框中,使用了Bootstrap的模态框后发现打印的效果不太好,后来就使用原生的方式弹出一个新的窗口,不过新的窗口中的某些数据又需要从前一个页面中获取,使用AngularJS框架后发现从后台返回的页面总是被封装成一个对象...

解决VMwareworkstation无法在windows上运行

步骤 1.在我的电脑上搜索控制面板   2.打开控制面板 3.点击程序 4.点程序和功能 5.点击已安装更新 6.找到最上面的一次微软更新,然后将最新的微软更新更新卸载。 7.重启后就能用了 说白了,就是最后一句话! 图示: 但是,这只能解决一时的问题,电脑终究要更新的,还有一种方法直接到官方下载新版本,里面的东西不会变的...

asp.net 操作excel的一系列问题(未完待续)

最近在处理exel的一些东西,遇到了很多问题,现在就在此将问题和网上找到的解决办法 1.外部表不是预期格式错误    错误经过:在读取Excel时,出现外部表不是预期的格式 错误原因1: 由于Excel 97-2003的连接格式与Excel 2010 的 不同造成。 以下是从网上摘抄原文 Excel “External table is not i...

恶意软件--》木马、病毒、蠕虫

--》特洛伊木马: 是指通过特定的程序(木马程序)来控制另一台计算机。。 “木马”与计算机网络中常常要用到的远程控制软件有些相似,但由于远程控制软件是“善意”的控制,因此通常不具有隐蔽性;“木马”则完全相反,木马要达到的是“偷窃”性的远程控制,如果没有很强的隐蔽性的话,那就是“毫无价值”的。 它是指通过一段特定的程序(木马程序)来控制另一台计算机。木马通常...

React项目的一些配置以及插件

创建项目 1、安装cra npm install -g create-react-app 2、创建项目   “react-lesson”  为文件名 create-react-app react-lesson 3、启动项目 npm start   使用第三方组件 1、antd: npm install antd --save 使用: import Butt...