uni-app的常见生命周期

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 还行

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

猜你喜欢

转载自blog.csdn.net/weixin_48255917/article/details/110121385