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 还行
写的很大概,详情去找官方文档