uniapp生命周期函数

2023-09-01 08:06| 来源: 网络整理| 查看: 265

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

uniapp生命周期函数(仅写常用的生命周期函数, 不常用的就不写了, 如果有需求可以去官网查看)

在uniapp中,生命周期函数分为应用生命周期函数、页面生命周期函数和组件生命周期函数.

一.应用生命周期函数

应用生命周期函数只能在App.vue中监听有效,在其他页监听无效

onLaunch: 当uni-app初始化完成时触发(全局只触发一次); onShow: 当uni-app启动, 或从后台进入前台显示(例如小程序中, 用户分享页面再进来就会触发一次onShow); onHide: 当uni-app从前台进入后台; onError: 当uni-app报错时触发; 二.页面生命周期函数

页面是指在pages中声明的页面, 如果在components里边新建的组件应该用组件生命周期函数

1. onLoad: 监听页面加载, 其参数为上个页面传递的数据;(只加载一次) // url:'pages/xxx/xxx?data=data' onLoad(e){ console.log(e.data); //data为上个页面传递的参数, e的类型为Object } 2. 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' }) } } 3. onReady: 监听页面初次渲染完成;(如果渲染速度快, 会在页面进入动画完成前触发) 4. onHide: 监听页面隐藏; 5. onUnload: 监听页面卸载;(当用户离开页面时, 触发onUnload函数) onLoad(){ uni.$on("getData",function(e){ console.log(e);//监听数据 }) }, onUnload(){ uni.$off("getData");//页面卸载时结束监听数据 } 6. onResize: 监听窗口尺寸变化; 7. 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返回的.

三.组件生命周期函数 1. beforeCreate: 实例初始化之后调用; 2. created: 在实例创建完成后立即被调用; 3. beforeMount: 在挂载开始之前调用; 4. mounted: 挂载到实例上去之后调用

props从父页面传过来的数据可以在mounted中打印

【本文地址】

公司简介

联系我们