zoukankan      html  css  js  c++  java
  • 移动端开发基础【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。

    官网:http://www.lenbor.com
  • 相关阅读:
    DuckHunter Attacks
    iOS10 UI教程视图的边界与视图的框架
    iOS10 UI教程视图的几何形状
    iOS10 UI教程禁用视图与用户的交互
    iOS10 UI教程基改变视图的外观与视图的可见性
    分享Kali Linux 2016.2第47周虚拟机
    iOS10 UI教程基础窗口的内容与设置起始窗口
    分享Kali Linux 2016.2第47周镜像
    Swift3.0语言教程字符串与URL的数据转换与自由转换
    人机接口设备攻击(HID Attack)
  • 原文地址:https://www.cnblogs.com/lenbor/p/12924082.html
Copyright © 2011-2022 走看看