移动端开发基础【8】页面生命周期

1.onLoad

监听页面加载,他的参数是上一个页面传递的数据,参数类型为对象(Object用于页面传参)。

第一步:跳转页面并在url中传递参数

 

第二步:在onLoad页面周期函数中接收从上个页面传过来的参数,并打印。

 

在第一步的传递参数中还有一个需要特别注意的点:url有长度限制,太长的字符串会传递失败。解决的方式有很多种,如使用窗体通信、全局变量或encodeURLComponent等。这里就只为大家分享一种,使用encodeURLComponent解决的方法。

第一步:传参时使用encodeURLComponent函数

 

第二步:在onLoad函数中接收时使用decodeURLComponent函数。

 

 2.onReady

监听页面首次渲染完成。如果渲染速度快,会在页面进入动画完成前触发。

3.onUnload

监听页面卸载。

4.onResize

监听窗口尺寸的变化,这个方法只在App和小程序中生效,其他平台不支持。

5.onPullDownRefresh

在js中定义onPullDownRefresh处理函数,监听用户下拉动作,一般用于页面的下拉刷新操作。

在使用onPullDownRefresh函数时需要注意以下两点:

(1)   使用之前需要在pages.json里面找到当前页面的pages节点,并在style选项中开启enablePullDownRefresh.

 (2)   当处理完数据刷新后,uni.stopPullDownRefresh可以停止当前页面的下拉刷新。

6.onReachBottom

页面上拉触底事件的处理函数。

7.onTabItemTap

点击 tab 时触发,参数为Object。只在微信小程序、百度小程序、H5、App(自定义组件模式)中生效,其他平台不生效。

使用onTabItemTap函数时注意以下三点:

(1)onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。

(2)如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件。

(3)onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。

参数说明:

(1)   属性index,类型为String,表示被点击的tabItem的序号,它是从0开始的。

(2)   属性pagePath,类型String,表示被点击的tabItem的页面路径。

(3)   属性text,类型String,表示被点击的tabItem的按钮文字。

8. onShareAppMessage

用户点击右上角分享。这个函数只在微信小程序、百度小程序、字节跳动小程序、支付宝小程序几个平台生效。

9. onPageScroll

监听页面滚动,参数为Object对象。对象里面包括了滚动的距离。

参数说明:属性scrollTop,它的类型为Number,表示页面在垂直方向已滚动的距离,单位为px.

10. onNavigationBarButtonTap

监听原生标题栏按钮点击事件,参数为Object。只在5+ App、H5平台生效。

参数说明:属性index,类型Number,表示原生标题栏按钮数组的下标。

11. onBackPress

监听页面返回,返回 event = {from:backbutton、 navigateBack} 。只在App、H5平台生效,其他平台不生效。

回调参数对象说明:属性from,类型String,表示的是触发返回行为的来源:‘backbutton’——左上角导航栏按钮及安卓返回键;‘navigateBack’——uni.navigateBack()方法。

当用户进行以下三种操作时,会触发onBackPress函数:

(1)   Android实体返回键(event = {from:backbutton }).

(2)   顶部导航栏左边的返回按钮(event = {from:backbutton })

(3)   返回API,即uni.navigateBack() (event = {from: navigateBack})

注意事项:

(1)   该函数中返回值为true时,表示可以不执行默认的返回,执行自己自己此时的业务逻辑。

(2)   当函数不返回或者返回其他值时,都会执行默认的返回逻辑。

(3)   在H5平台,顶部导航栏返回按钮支持onBackPress(),浏览器默认返回键以及Android手机实体返回键不支持onBackPress().

(4)   暂时不支持直接在自定义组件中配置该函数,目前只能在页面中处理。

12. onNavigationBarSearchInputChanged

监听原生标题栏搜索输入框输入内容变化事件。在App、H5平台生效且HBuilder X的版本不低于1.6.0

13. onNavigationBarSearchInputConfirmed

监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。在App、H5平台生效且HBuilder X的版本不低于1.6.0

14. onNavigationBarSearchInputClicked

监听原生标题栏搜索输入框点击事件. 在App、H5平台生效且HBuilder X的版本不低于1.6.0。

猜你喜欢

转载自www.cnblogs.com/lenbor/p/12924082.html