uni-app生命周期

应用的周期函数

onLaunch初始化完成时触发(全局只触发一次)
onShow 启动时,或从后台进入前台是显示
onHide从前台进入后台
onError报错时触发

页面的周期函数

onLoad监听页面加载,参数为上个页面传递的参数,参数类型为对象(触发一次)
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回,返回到当前页面
onReady监听页面初次渲染完成(触发一次)
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用户下拉刷新,与onLoad生命周期函数同级

  • 第一种方式 在pages.json页面下配置路由"style":{"enablePullDownRefresh":true}
//在下拉刷新过后启用勾子函数
onPullDownRefresh(){//逻辑代码setTimeout(()=>{ //由于有的文件太小刷新立马就好了,所以做了计时器来看效果,实际开发看要求//逻辑代码uni.stopPullDownRefresh()  //延时2s刷新页面并关闭},2000)
}
  • 第二种方式
    调用uni.startPullDownRefresh() 这个方法

比如说点击按钮实现刷新

methods:{pullDown(){      //在按钮上定义的事件方法uni.startPullDownRefresh()}
}

onReachBottom页面滚动到底部的事件,常用于下拉下一页的数据,也就是数据太多页面需要下拉的时候,到达触底的时候触发,可以设置距离触底的距离,默认是50rpx,可以在pages.json里面设置"onReachBottomDistance":200

onTabItemTap点击tab时触发
onShareAppMessage点击右上角的分享

组件生命周期函数跟vue周期函数一致

4个步骤8个状态
beforeCreate 初始化之前 几乎没有东西可以操作,数据还是undefined
created 初始化之后 除了dom,数据在此时已经有了,常用于数据初始化
beforeMount 挂载之前 除了dom,数据在此时已经有了
mounted 挂载之后 此时页面所有东西都可以操作了
beforeUpdate 改变之前 之后全部都可以操作 仅支持H5
updated 改变之后 仅支持H5
beforeDistory 销毁之前
distoryed 销毁之后
nextTick() 在合适的地方去调用,这个面试比较爱问,此时面试官已经在挖坑
我认为这篇的 nextTick 还行

写的很大概,详情去找官方文档

uni-app的常见生命周期相关推荐

  1. APP用户的生命周期价值(LTV)

    APP用户的生命周期价值(LTV) 什么是APP用户的生命周期及价值: 生命周期是指一个主体从开始到结束的发展过程,比如人生老病死的整个过程.APP用户的生命周期可以解释为用户从与APP建立关系开始到 ...

  2. WatchOS开发教程之一: Watch App架构及生命周期

    WatchOS 开发教程系列文章: WatchOS开发教程之一: Watch App架构及生命周期 WatchOS开发教程之二: 布局适配和系统Icon设计尺寸 WatchOS开发教程之三: 导航方式 ...

  3. 【七千字心得】APP全生命周期管理

    今年众多互联网APP遇到了通报批评.整改.甚至下架的处理场景.APP仿佛成为了一个"烫手山芋",但他更是一个自己公司的"掌上明珠". 从移动互联网时代以来,AP ...

  4. APP用户生命周期价值分析与测量

    用户在任何公司的整个生命周期中都会获得或者失去,但真正伟大的产品或服务可以让用户关系更为稳固,不断增加用户生命周期价值. 许多公司忽略了用户生命周期价值这一指标,而是采取短视的方法,在短期内优化单一用 ...

  5. 【15】Vue:02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例

    文章目录 day02 Vue常用特性 表单基本操作 表单修饰符 自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令 带参数 自定义指令局部指令 计算属性 c ...

  6. react 生命周期详解

    React-ES6 : class App extends React.Component {static get propTypes() {return {//nameProp: PropTypes ...

  7. Android Activity 生命周期详解及监听

    前言 系列文章: Android Activity 与View 的互动思考 Android Activity 生命周期详解及监听 Android onSaveInstanceState/onResto ...

  8. vue2.0组件生命周期探讨

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue ...

  9. 015_Vue生命周期

    1. 生命周期主要阶段 1.1. 挂载(初始化相关属性) beforeCreate created beforeMount mounted 1.2. 更新(元素或组件的变更操作) beforeUpda ...

最新文章

  1. C++/C++11中std::runtime_error的使用
  2. 驰骋工作流引擎Silverlight版本的流程解析执行器-预计在6月份发布
  3. Plan with Global Optimization
  4. 详解单链表经典OJ题
  5. yum仓库、源以及编译安装笔记
  6. Python 2.x 与Python 3.x的差别总结
  7. JavaFX图表(四)之面积图
  8. 实例变量与局部变量的区别 java 1615135277
  9. 自己在OC考试中的试题
  10. 易懂的比特币工作机理详解
  11. DevExpress DateEdit 5 常见问题解决方法
  12. bootstrap布局设计在线工具
  13. 联想微型计算机改win7,联想win10改win7如何实现?联想电脑Win10改Win7方法详解
  14. winform中ComboBox下拉框控件的动态数据填充
  15. Java常用API——学习笔记(7)
  16. L130被围绕的区域
  17. CDS TABLE FUNCTOIN传参,指定客户端
  18. 深度学习与神经网络-压缩感知(Compressive Sensing)学习(五)
  19. 【Python】 调用百度地图API抓取西安市小区信息
  20. UEFI 2 Overview

热门文章

  1. part01.03 委托与 Lambda 表达式(三):Lambda 表达式
  2. ​Au 入门系列之三:波形编辑器操作基础
  3. Java项目:游戏点评系统(java+SSM+JSP+JavaScript+mysql)
  4. Outlook如何将导航栏从左侧移动到底部
  5. 服务器遇到一个意外的情况,阻止它完成请求
  6. java 多个pdf文件合并,解决删除提示文件被占用
  7. 音视频开发(三十二):GPUImage高斯模糊的实现与优化
  8. 空间换时间--编程小绝招解决电话区号识别算法问题
  9. 成功的 Git 分支模型
  10. 导航地图哪家强?谷歌地图超高分辨率完爆同类型对手