uniapp生命周期函数
在uniapp中,生命周期函数分为应用生命周期函数、页面生命周期函数和组件生命周期函数.
一.应用生命周期函数
应用生命周期函数只能在App.vue中监听有效,在其他页监听无效
onLaunch: 当uni-app初始化完成时触发(全局只触发一次);
onShow: 当uni-app启动, 或从后台进入前台显示(例如小程序中, 用户分享页面再进来就会触发一次onShow);
onHide: 当uni-app从前台进入后台;
onError: 当uni-app报错时触发;
二.页面生命周期函数
页面是指在pages中声明的页面, 如果在components里边新建的组件应该用组件生命周期函数
- onLoad: 监听页面加载, 其参数为上个页面传递的数据;(只加载一次)
// url:‘pages/xxx/xxx?data=data’
onLoad(e){
console.log(e.data); //data为上个页面传递的参数, e的类型为Object
} - onShow: 监听页面显示;(当点击进入其他页面再回来时, 会触发此函数; 如果需要数据变化, 可写在这个函数里)
onLoad(){
this.getData();//1.页面加载getData函数执行一次
},
onShow(){
//4.页面从pages/xxx/xxx返回触发onShow, getdata函数执行第三次
this.getData();//2.页面首次加载也会触发onShow, getData函数执行第二次
},
methods:{
//3.点击进入其他页面
clickChange(){
uni.navigateTo({
url: ‘pages/xxx/xxx’
})
}
} - onReady: 监听页面初次渲染完成;(如果渲染速度快, 会在页面进入动画完成前触发)
- onHide: 监听页面隐藏;
- onUnload: 监听页面卸载;(当用户离开页面时, 触发onUnload函数)
onLoad(){
uni.KaTeX parse error: Expected 'EOF', got '}' at position 56: …g(e);//监听数据 }) }̲, onUnload(){ …off(“getData”);//页面卸载时结束监听数据
} - onResize: 监听窗口尺寸变化;
- onPullDownRefresh: 监听用户下拉动作(下拉刷新)
需要现在pages.json中, 找到对应的pages节点, 并在整体的style选项中开启enablePullDownRefresh;
如果想让某页不能下拉刷新, 可以在该页的style中设置enablePullDownRefresh为false;
uni.stopPullDownRefresh可以停止当前页面的下拉刷新;
如果没写停止下拉刷新事件, 在页面下拉之后下拉的动画不会自动消失;
//pages.json
{
“pages”:[{
“path”:“pages/xxx/xxx”,
“style”:{
“enablePullDownRefresh”: true
}
}]
}
//pages/xxx/xxx
onPullDownRefresh(){
console.log(‘下拉刷新了’)
//1s后停止页面刷新动画, 再次下拉时仍会先执行onPullDownRefresh, 1s后执行停止事件
setTimeout(function(){
uni.stopPullDownRefresh()
},1000)
}
8.onReachBottom: 页面滚动到底部的时间, 常用于下拉下一页数据(上拉加载)
可以在pages.json中设置具体页面底部触发距离onReachBottomDistance.
如果使用了scroll-view导致页面没有滚动, 则不会触发触底事件
9.onTabItemTap: 点击tab时触发, 参数为Object
index: 被点击tabItem的序号, 从0开始
10.onShareAppMessage: 用户点击右上角分享
11.onPageScroll: 监听页面滚动(可以获取滚动距离)
onPageScroll: function(e){
console.log(“页面滚动距离为”+e.scrollTop)
}
12.监听原生标题栏按钮点击事件
13.onBackPress: 监听页面返回
返回的参数类型为对象, event={from:backbutton、navigateBack},backbutton表示返回来源是点击左上角返回按钮还是安卓返回键, navigateBack是通过uni.navigateBack返回的.
三.组件生命周期函数
- beforeCreate: 实例初始化之后调用;
- created: 在实例创建完成后立即被调用;
- beforeMount: 在挂载开始之前调用;
- mounted: 挂载到实例上去之后调用
props从父页面传过来的数据可以在mounted中打印